原生 JS 绑定事件移除事件

监听事件的绑定与移除主要是addEventListener和removeEventListener的运用。

addEventListener语法
element.addEventListener(type，handler，false/true)

type:事件类型

handler:事件执行触发的函数

false/true:false为冒泡/ture为捕获，参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

事件捕获：父级元素先触发，子集元素后触发；

事件冒泡：子集元素先触发，父级元素后触发；

一般的绑定事件，都是采用冒泡方式，也就是使用false

removeEventListener语法
element.removeEventListener(type，handler，false/true)

参数值含义和上述一样。




1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <input type="button" value="test1" id="btn1">
 9 <input type="button" value="test2" id="btn2">
10 <script>
11     var btn1=document.getElementById("btn1");/*实名函数*/
12     var count=0;
13     var handle1=function() {
14         alert(count++);
15         if (count == 3) {
16             alert("事件结束")
17             btn1.removeEventListener("click",handle1,false);
18         }
19     }
20     btn1.addEventListener('click',handle1,false);
21 
22 
23     var btn2=document.getElementById("btn2");/*匿名函数*/
24     btn2.addEventListener("click",function(){
25         alert(123);
26         removeEventListener("click",function(){
27             alert(123)
28         },false)
29     },false)
30 </script>
31 </body>
32 </html>
原生 JS 绑定事件 移除事件

原生 JS 绑定事件移除事件
