原文地址为: 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:
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>
这就是简单的监听事件的绑定与移除。
转载请注明本文地址: js监听事件的绑定与移除