js监听事件的绑定与移除

时间：2022-07-17 04:38:31

 监听事件的绑定与移除主要是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：

 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>

通过匿名函数是无法消除监听事件，只有通过实名函数才能。

例2：利用库来处理事件的绑定和移除会更加方便

（1）js事件的绑定与移除库

 1 /**
 2  * Created by asus on 2016/11/1.
 3  */
 4 var EventUtil={
 5     /*检测绑定事件*/
 6     addHandler:function(element,type,handler){
 7         if(element.addEventListener){
 8             element.addEventListener(type,handler,false);
 9         }
10         else if(element.attachEvent){
11             element.attachEvent('on'+type,handler);
12         }
13         else{
14             element["on"+type]=handler /*直接赋给事件*/
15         }
16 
17     },
18     /*通过removeHandler*/
19     removeHandler:function(element,type,handler) {   /*Chrome*/
20         if (element.removeEventListener)
21             element.removeEventListener(type, handler, false);
22         else if (element.deattachEvent) {               /*IE*/
23             element.deattachEvent('on' + type, handler);
24         }
25         else {
26             element["on" + type] = null;
27             /*直接赋给事件*/
28         }
29     }
30 
31 };

（2）HTML

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script src="封装监听事件.js"></script>
 7 </head>
 8 <body>
 9 <input type="button" value="bangding" id="btn">
10 <input type="button" value="yichu" id="btn1">
11     <script type="text/javascript">
12         var btn=document.getElementById("btn");
13         var bangding=function(){
14             alert("你好！")
15             }
16         EventUtil.addHandler(btn,"click",bangding);
17 
18         var btn1=document.getElementById("btn1");
19         var yichu=function(){
20            alert("你好已被移除！");
21              EventUtil.removeHandler(btn,"click",bangding)
22         }
23         EventUtil.addHandler(btn1,"click",yichu)
24     </script>
25 </body>
26 </html>

这就是简单的监听事件的绑定与移除。

 

标签：

相关文章