WEB前端第三十一课——js事件处理-鼠标

  • A+
所属分类:Web前端
摘要

1.事件基础  事件,是一种可以被js检测到的行为,本质是一种交互操作  事件的作用:

1.事件基础

  事件,是一种可以被js检测到的行为,本质是一种交互操作

  事件的作用:

    ① 各个元素之间可以借助事件进行交互

    ② 用户和页面之间也可以通过事件交互

    ③ 后端和页面之间也可以通过事件交互

  注意,事件通常与函数配合使用,事件发生时触发函数执行

2.事件传递

  js中规定,事件不仅能和触发者交互,还会在特定情况下沿着DOM tree逐级传递,和DOM tree中的各个节点进行交互,这种事件处理机制称作事件传递

  特定情况是指DOM tree不同层级中存在同名事件

  事件传递的方式主要有两种:

    事件冒泡,从最具体的元素开始,沿着DOM tree逐级向上依次触发,直至最不具体的元素停止

    事件捕获,从最不具体的元素开始,沿着DOM tree逐级向下依次触发,直至最具体的元素停止

3.事件绑定

  ① HTML事件

    绑定操作发生在HTML代码中的事件,成为HTML事件

    语法:on+事件=' 函数1() ; 函数2() ;...' ,on事件作为属性添加给元素,示例如下:

<body>     <ul class="ulEvent" onclick="function1() ; function2() ;">         <li class="liEvent" onclick="function2()">事件冒泡</li>     </ul> </body> 

    上述代码中,点击<li>时会先执行<li>的绑定事件,即执行 function2()函数

    然后按照事件冒泡机制传递到上一级DOM节点<ul>,执行<ul>中的 function1()和 function2()函数

    HTML事件是采用冒泡机制进行处理的,同一级函数的执行顺序按照绑定函数时的自然顺序为准

  ② HTML事件的移除

    语法:元素节点 .setAttribute('on+事件名' , null);

    HTML事件缺陷:耦合性太强,修改一处另一处也要修改;

            当函数没有加载成功时,触发事件则会报错。

  ③ DOM0级事件

    在js脚本中,直接通过“on+事件名”方式绑定的事件称为DOM0级事件

    语法:元素节点 .on+事件名=function(){ 函数体 };

    示例:btn .onclick = function(){ console.log('点击按钮触发事件'); };

    DOM0级事件均以冒泡机制处理,不存在兼容问题

  ④ DOM0级事件的移除

    语法:元素节点 .on+事件名=null;

    示例:btn .onclick = function(){

              console.log('点击按钮触发事件');

              btn.onclick=null;     //移除语句在函数内部,触发事件则会执行一次

             };                                //移除语句在函数外部,触发事件则不会执行

    DOM0级事件缺陷:一次只能绑定一个触发函数,如果同时绑定多个,则以最后一个绑定事件为准

  ⑤ DOM2级事件

    在js脚本中,通过按 addEventListener函数绑定的事件称为DOM2级事件

    语法:元素节点 .addEventListener('type' , listener , useCapture);

      参数 type,事件类型(不加 on!)

      参数 listener,监听函数,绑定的函数

      参数 useCapture,是否使用捕获机制(默认false:冒泡,true:捕获)

    DOM2级事件可以绑定多个函数,执行顺序按照书写时的自然顺序

    示例:

      btn .addEventListener('click' , function(){ 函数体1 },true);

      btn .addEventListener('click' , 外部函数名(),true);

  ⑥ DOM2级事件的移除

    语法:元素节点 .removeEventListener(type, 外部函数(), useCapture);

    注意:

    如果绑定函数为“匿名函数”则无法删除,能够删除的只有外部函数

    如果删除的事件为捕获机制,则第三个参数必须写 true,如果是默认可以不写

4.IE浏览器事件绑定

  HTML事件和 DOM0级事件 在IE浏览器中的处理程序与非IE环境相同,但是 DOM2级事件处理方式不同

  ① IE浏览器环境下 DOM2级事件,在js脚本中,需要通过 attachEvent函数绑定事件

    语法:元素节点 .attachEvent(' type ', listener);

      参数 type,事件类型(需要加 on!)

      参数 listener,监听函数,绑定的函数

    注意,如果绑定多个函数,则按照函数书写的倒序执行!

  ② IE浏览器环境下,DOM2级事件移除

    语法:元素节点 .detachEvent(' type ' , listener);

    注意,匿名函数无法被删除!

5.鼠标事件

  js鼠标事件是指通过鼠标一系列操作(如点击、进入等)来出发的时间

  ① 鼠标事件类型:

    click,单击事件

    dblclick,双击事件

    mousedown,鼠标按下时触发

    mouseup,鼠标抬起时触发

    mousemove,鼠标移动时触发

    mouseenter,鼠标移入时触发(不冒泡)

    mouseleave,鼠标移除时触发(不冒泡)

    mouseover,鼠标移入时触发(冒泡)

    mouseout,鼠标移出时触发(冒泡)

  语法:元素节点 .on+鼠标事件名 = 调用函数名;

  示例:slem .ondblclick = function(){ 函数体; };

  获取鼠标移动坐标轨迹测试代码:

<html lang="en"> <head>     <meta charset="UTF-8">     <title>鼠标事件</title> </head> <body>     <div style="width:300px;height:300px;margin:100px auto;background-color:hotpink">         mouseEventTest     </div> <script>     var div=document.querySelector('div');     div.onmousemove=function () {         var x=event.clientX;         var y=event.clientY;         //event对象仅在函数内部使用,表示事件本身         //clientX、clientY表示鼠标在窗口中的坐标         console.log('(x,y):('+x+','+y+')');     }     var div1=document.getElementsByTagName('div');     console.log(div1[0].firstChild.nodeValue); //    也可以使用 .getElementsBy方法,但返回结果为集合,使用时需要加下标! </script> </body> </html> 

  ② 鼠标事件原则
    鼠标的基本事件默认采用冒泡传递

    可以给一个节点添加多个鼠标事件,不同的鼠标事件之间互不影响

    mouseenter和mouseleave两个事件为不冒泡事件

6.拖动条鼠标事件

<html lang="en"> <head>     <meta charset="UTF-8">     <title>鼠标事件</title> <style>     input{         width: 300px;         margin: 100px 600px 0px;     }     #tips{         width: 30px;         height: 25px;         margin: 0px 750px;         padding: 0;         font-size: 18px;         text-align: center;         border: 1px solid aqua;         position: absolute;         display: none;     } </style> </head> <body>     <input type="range" min="0" max="100" value="50">     <div id="tips"></div> <script>     var input=document.querySelector('input');     var tips=document.getElementById('tips');     function move(){         input.onmousemove=function () {             var x=event.clientX;             var Y=event.clientY;             // 使用switch语句控制提示框移动范围???????????????????????????????????????? /*            switch (x) {                 case x<600:tips.style.left=-150+'px';                     break;                 case x>900:tips.style.left=150+'px';                     break;                 case x>=600&&x<=900:tips.style.left=(x-750)+'px';                     break;             }*/             // 使用if语句控制提示框移动范围             if (event.clientX>900){                 x = 900;             }else if (event.clientX<600){                 x = 600;             }else{                 tips.style.left=(x-750)+'px';             }              tips.innerHTML=input.value;              // console.log('(x,y):('+x+','+'y'+')');         }     };     input.onmousedown=function () {         tips.style.display='block'         move();     };     input.onmouseup=function () {         tips.style.display='none'         input.onmousemove=null;     } </script> </body> </html> 

7.导航栏鼠标事件

<html lang="en"> <head>     <meta charset="UTF-8">     <title>导航栏hover效果鼠标事件</title> </head> <body>  <script>     var ul=document.createElement('ul');     ul.style.listStyle='none';     ul.style.padding='0';     var navArr=['首页','财经','政治','军事','娱乐','天气'];     for (var i=0;i<navArr.length;i++){         var li=document.createElement('li');         li.innerHTML=navArr[i];         li.style.cssText='width:80px;height:30px;text-align:center;' +             'line-height:30px;display:inline-block;background-color:lightblue;'         ul.appendChild(li);         //触发事件只能写在循环内部         li.onmouseenter=function(){             //this对象表示函数的调用对象,即谁调用了该函数this就代表谁             //如果使用li设置style属性则只有最后一次循环生效             this.style.backgroundColor='orange';         }         li.onmouseleave=function () {             this.style.backgroundColor='lightblue';         }     }     document.body.appendChild(ul); </script> </body> </html> 

8.拖动元素鼠标事件

<html lang="en"> <head>     <meta charset="UTF-8">     <title>元素拖动鼠标事件</title> <style>     #ball{         width: 100px;         height: 100px;         border-radius: 50%;         background-color: aqua;         /*box-shadow: -10px -10px 10px 5px darkorange;*/         position: absolute;     } </style> </head> <body> <div id="ball"></div> <script>     var ball=document.getElementById('ball');     var flag=false;     ball.onmousedown=function(){         flag = true;     }     ball.onmouseup=function(){         flag = false;     }     ball.onmousemove=function(){         if (flag==true){             ball.style.left=event.clientX-50+'px';             ball.style.top=event.clientY-50+'px';         }     } </script> </body> </html>