Js 事件详解

一：js中常见得事件

（1） : 鼠标事件

click ：点击事件

dblclick ：双击事件

contextmenu ：右键单击事件

mousedown ：鼠标左键按下事件

mouseup ：鼠标左键抬起事件

mousemove ：鼠标移动

mouseover ：鼠标滑入事件

mouseout ：鼠标滑出事件

mouseenter ：鼠标移入事件

mouseleave ：鼠标移出事件

（2）：键盘事件

keyup ：键盘抬起事件

keydown ：键盘按下事件

keypress ：键盘按下事件

（3）：表单事件

change : 表单内容改变事件

input : 表单内容输入事件

blur : 表单失去焦点

focus：表单获取焦点

二：事件侦听过程详解

　　1：事件侦听 - 就是给事件源（dom元素）绑定一个事件

　　　给DOM元素添加一个事件侦听（监听）,这个DOM元素只能收到对应事件类型的消息

　　　语法：DOM元素.addEventListener(事件类型,事件回调函数,是否捕获时执行) - addEventListener这个就是用来侦听事件得关键字

　　　侦听事件addEventListenerd的三个参数参数：

参数1：事件类型 - 必须是字符串，可以设置为任意字符串，但是部分字符串是系统事件类型

参数2: 事件回调函数 - 指向一个函数，当收到事件时执行该函数，如果没有收到不执行函数，写侦听事件时不执行函数

注意1：事件回调函数 - 有且仅有一个参数为 e - event对象

注意2：e 是一个事件对象,侦听事件收到消息时获得的事件对象

　　　　 参数3：是否捕获时执行 - 默认值是false，在冒泡时执行，捕获时不执行 / 如果设置为true，在捕获时执行

1 // 创建一个侦听事件 , 事件类型为 点击 click ,回调函数为clickHandler ,默认 冒泡
2             document.addEventListener('click',clickHandler)
3 
4 // 事件回调函数的参数  MouseEvent - 鼠标事件
5             function clickHandler(e) {
6                 console.log("我被点击了")  
7             }

　　在上面得代码中侦听事件得对象为 document 就是网页，当我们点击网页得任何一个位置就会触发点击事件，那么就会执行事件的回调函数 clickHandler，打印结果

　　1.2：删除事件　　

　　　　删除事件：语法 - 侦听对象.removeEventListener(事件类型,事件回调函数) IE8 以上支持

删除事件的兼容写法：attachEvent 仅IE8及以下支持事件类型 "on"+type 没有捕获、冒泡阶段选项

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <body>  
 9     <button id="btn">按钮</button>
10 </body>
11 <script>
12         // 获取dom元素
13         var btn = document.querySelector('#btn')
14         // 侦听事件
15         btn.addEventListener('click',clickHandler1)
16         // 事件回调函数
17         var num = 0
18         function clickHandler1(e){
19             num++
20             console.log('当num > 3 得时候删除事件')
21             if (num>3){
22                 // 删除事件
23                 e.currentTarget.removeEventListener('click',clickHandler1)
24             }
25         }    
26 </script>
27 </html>

　　当我们不断点击按钮，就会不断的触发事件，每点击一次 num 的值就会增加，当num大于3时，就删除本次创建的事件和事件回调函数，为什么要删除事件呢？因为当元素的事件不再使用时，必须删除，否则会造成内存堆积，侦听事件都会被存储在堆中，当元素被删除了，也必须删除该元素的所有事件。

　　2：事件侦听与抛发

　　事件侦听语法：事件侦听对象.addEventListener(事件类型,事件回调函数,是否捕获时执行)

　　创建事件对象语法：var evt = new Event(事件类型) -指创建一个事件对象

抛发事件语法：事件侦听对象.dispatchEvent(接受事件对象变量)

　　在我们创建事件的过程中，必须先侦听在抛发 - 如果先抛发在侦听，我们将无法获取到事件是否被触发

在我们使用侦听事件的过程中需要注意：

1：事件抛发一般分两种：系统抛发事件 / 自定义抛发事件(需要我们自己创建事件对象)

2：侦听和抛发的对象是同一个

3：侦听和抛发的事件类型完全相同

4：事件回调函数不能使用return 返回值，但是可以return 跳出

 1 // 侦听事件
 2         document.addEventListener('奥里给',customHandler)
 3 // 创建一个事件对象 
 4         var evt = new Event('奥里给')
 5 // 抛发事件
 6         document.dispatchEvent(evt)
 7 // 事件回调函数
 8         function customHandler(e) {
 9             console.log(e.type)  //e.type 查看事件的类型

10 }

三：事件三阶段

　　　　一阶段：捕获由外到内

二阶段：目标到达目标

三阶段：冒泡由内到外

　　事件三阶段案例：先写好html代码显示三个背景颜色不一样的块。如下

js代码

 1 // 获取 标签
 2     var div0 = document.querySelector('.div0')    // 绿色背景块
 3     var div1 = document.querySelector('.div1')    // 浅粉色块
 4     var div2 = document.querySelector('.div2')    // 红色块
 5 
 6      // 给每个块都添加点击事件  
 7     div0.addEventListener('click',clickHandler0)
 8     div1.addEventListener('click',clickHandler1)
 9     div2.addEventListener('click',clickHandler2)
10     function clickHandler0(e){
11         console.log('点击div0')
12     }
13 
14     function clickHandler1(e){
15         console.log('点击div1')
16         
17     }
18 
19     function clickHandler2(e){
20         console.log('点击div2')
21     }

当我们在点击红色块时，我们会发现，div1和div0都被打印了，这就是事件的冒泡，我们点击的真正目标为红色块div2，但是却触发了其他两个块，那么事件如何进行三阶段的呢？首先当我们点击红色块div2时，事件进入一阶段，捕获阶段，他会先进入div0，查找目标，当没有发现，会进入下一层查找目标，当进入粉丝块时，也没有发现我们想要的目标，当进入红色块div2 时，就会找到我们点击的目标，div2，这个时候事件的一阶段就变成了二阶段，目标阶段，就会开始向外发送信息触发事件，执行事件回调函数，并由二阶段变成三阶段，冒泡阶段，这时是由内向外的一个过程，不断的往外并触发经过的块的事件，直到最外层，这就是事件三阶段的全过程。那么我们可不可以让他不冒泡呢，有

阻止冒泡语法 e.stopPropagation() 只需要写在想停止冒泡的事件回调函数中

阻止事件冒泡 - 当我们只想让红色块触发事件，其他两个块不触发就是不冒泡，就在红色块的事件回调函数中，写上阻止事件冒泡，这样当事件到二阶段找到目标时，就不会往外冒泡了，那么div0和div1就不会被触发，看如下代码，

 1     div0.addEventListener('click',clickHandler0)
 2     div1.addEventListener('click',clickHandler1)
 3     div2.addEventListener('click',clickHandler2)
 4     function clickHandler0(e){
 5         console.log('点击div0')
 6         
 7     }
 8 
 9     function clickHandler1(e){
10         console.log('点击div1')
11         
12     }
13 
14     function clickHandler2(e){
15         e.stopPropagation()  // 阻止事件冒泡
16         console.log('点击div2') 
17 
18     }

这就是事件的三阶段过程，当你想在哪里阻止就在哪里书写阻止事件的方法，是很给力的

四：常用鼠标事件详解

　　1：鼠标点击和双击事件

　　　　1.1 单击事件

1         // 单击事件 click  - 侦听对象 document
2          document.addEventListener("click",clickHandler)
3          // 鼠标单击事件回调函数
4          function clickHandler(e){
5             console.log("我被点击了")
6          }

当我们点击页面任意一个地方时，就会触发点击事件，打印结果

　　　　1.2 双击事件

1         // 双击事件 dblclick  - 侦听对象 document
2          document.addEventListener("dblclick",dbclickHandler)
3          // 鼠标双击事件回调函数
4          function dbclickHandler(e){
5             console.log("我被双击了")
6          }

当我们双击页面任意一个地方时，就会触发点击事件，打印结果

　　2：鼠标移入移出事件和鼠标滑入滑出事件

　　　　鼠标移入移出（mouseenter 移入 mouseleave 移出）和鼠标滑入滑出事件事件是（mouseover 滑入 mouseout 滑出）有区别的，为了让能更好的区分，将所有的事件写在一个Dom元素上，同一个元素可以添加多个事件。

　　　　鼠标移入和鼠标滑入事件的区别：鼠标滑入事件是有冒泡阶段的，可以收到子元素的滑入和滑出，而鼠标移入事件没有冒泡阶段的，只能收到当前容器的移入和移出

　　　　HTML代码如下：

 1 <style>
 2         /* 鼠标事件样式 */
 3         #div1{
 4              200px;
 5             height: 200px;
 6             background-color: orange;
 7         }
 8         #div2{
 9              100px;
10             height: 100px;
11             background-color: red;
12         }
13 </style>
14 <body>
15         <!--  鼠标事件 -->
16         <div id="div1">
17             <div id="div2"></div>
18         </div>
19 </body>

　　JS代码

 1      // 给 div1 添加 鼠标划入滑出，移入移出事件
 2     var div1 = document.querySelector('#div1')
 3     div1.addEventListener('mouseover',mouseHandler)   // 滑入
 4     div1.addEventListener('mouseout',mouseHandler)    // 滑出
 5     div1.addEventListener('mouseenter',mouseHandler)  // 移入
 6     div1.addEventListener('mouseleave',mouseHandler)  // 移出
 7 
 8     // 事件回调函数
 9     function mouseHandler(e){
10         console.log(e.type)   // e.type 为事件的类型
11     }

当我们将鼠标移入到 div1 父盒子上时，会发现鼠标移入和滑入事件都触发，因为div1父容器元素添加了移入滑入事件，效果如下：

　当将鼠标移入到红色块 div2 中时，此时div2未添加任何事件，但是却会触发鼠标滑入事件（mouseover），因为mouseovr事件有会冒泡，而moseenter并不会，只会收到当前添加了事件容器的事件，也就是div1，效果如下：

说明 mouseover 时有会冒泡的，而 moseenter是没有冒泡阶段的。

　　3：鼠标左键按下和松开事件

1         // 鼠标左键按下松开事件  - 侦听对象 document
2         document.addEventListener("mousedown",mouseHandler)  
3         document.addEventListener("mouseup",mouseHandler)
4 
5         // 事件回调函数
6         function mouseHandler(e){
7                 console.log(e.type) 
8         }

当按下鼠标左键触发 mousedown 事件，松开鼠标左键触发 mouseup 事件：

右键事件也是如上添加。

五：表单事件

　　1：focus - 聚焦事件和 blur - 失焦事件

 1 <body>
 2         <input type="text" class="input">
 3 
 4 <script>
 5         // 获取dom元素
 6         var input = document.querySelector('.input')
 7         // 添加 focus - 聚焦事件 和 blur - 失焦 事件
 8         input.addEventListener('focus',focusHandler)
 9         input.addEventListener('blur',focusHandler)
10 
11         // 事件回调函数
12         function focusHandler(e){
13                 console.log(e.type)
14         }
15 </script>
16 </body>

当表单聚焦时，触发 focus 事件，失焦时触发 blur 事件：

　　2：表单内容改变事件 - change 和表单输入事件 input

　　　　2.1 change事件

 1 <body>
 2         <input type="text" class="input">
 3 
 4 <script>
 5         // 获取dom元素
 6         var input = document.querySelector('.input')
 7         // 添加 change - 表单内容改变事件 
 8         input.addEventListener('change',changeHandler)
 9         // change事件回调函数
10         function changeHandler(e){
11                 console.log(e.type,input.value)  // 打印触发的事件和表单内容
12         }
13 </script> 
14 </body>

请注意，失焦时触发！！

　　2.2：input 事件（一般input输入事件都会配合节流，因为输入事件只要输入一个字符都会触发，比较耗性能。）

 1 <body>
 2          <input type="text" class="input">
 3 
 4 <script>
 5        // 获取dom元素
 6        var input = document.querySelector('.input')
 7        // 添加 input - 表单输入事件 
 8        input.addEventListener('input ',inputHandler)
 9        // input事件回调函数
10        function inputHandler(e){
11               console.log(e.type,input.value)  // 打印触发的事件和表单内容
12        }
13 </script> 
14 </body>

六：键盘事件

　　1：keydown 按下键和 keyup 松开键

　　e.keyCode ：键码，键盘的每一个键都有对应的编码，根据码来辨别按下的是什么键。

　　e.code：键名

1      // 创建 按键侦听事件 - 侦听对象 document
2      document.addEventListener('keydown',keydownHandler)    // 按下键事件
3      document.addEventListener('keyup',keydownHandler)      // 松开键事件
4  
5      // 按键事件回调函数
6      function keydownHandler(e){
7          console.log(e.type,e.code,e.keyCode)   // 打印事件类型和键名，键码  
8      }

试试按下键盘上的上下左右键，效果如下: