js事件的监听器的使用

js事件的监听器的使用

1、当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的onclick事件发生时，只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行。如下：

[javascript] view plain copy print ?

1. <span style="font-size: 18px;">window.onload = function(){ 
2.     var btn = document.getElementById("yuanEvent"); 
3.     btn.onclick = function(){ 
4.         alert("第一个事件"); 
5.     } 
6.     btn.onclick = function(){ 
7.         alert("第二个事件"); 
8.     } 
9.     btn.onclick = function(){ 
10.         alert("第三个事件"); 
11.     } 
12. }</span> 

window.onload = function(){
    var btn = document.getElementById("yuanEvent");
    btn.onclick = function(){
        alert("第一个事件");
    }
    btn.onclick = function(){
        alert("第二个事件");
    }
    btn.onclick = function(){
        alert("第三个事件");
    }
}

最后只输出：第三个事件，因为后一个方法都把前一个方法覆盖掉了。

原生态的事件绑定函数addEventListener：

[javascript] view plain copy print ?

1. var eventOne = function(){ 
2.     alert("第一个监听事件"); 
3. } 
4. function eventTwo(){ 
5.     alert("第二个监听事件"); 
6. } 
7. window.onload = function(){ 
8.     var btn = document.getElementById("yuanEvent"); 
9.     //addEventListener：绑定函数 
10.     btn.addEventListener("click",eventOne); 
11.     btn.addEventListener("click",eventTwo); 
12. } 

var eventOne = function(){
    alert("第一个监听事件");
}
function eventTwo(){
    alert("第二个监听事件");
}
window.onload = function(){
    var btn = document.getElementById("yuanEvent");
	//addEventListener：绑定函数
    btn.addEventListener("click",eventOne);
    btn.addEventListener("click",eventTwo);
}

输出：第一个监听事件 和 第二个监听事件

2、采用事件监听给对象绑定方法后，可以解除相应的绑定，写法如下：

[javascript] view plain copy print ?

1. var eventOne = function(){ 
2.     alert("第一个监听事件"); 
3. } 
4. function eventTwo(){ 
5.     alert("第二个监听事件"); 
6. } 
7. window.onload = function(){ 
8.     var btn = document.getElementById("yuanEvent"); 
9.     btn.addEventListener("click",eventOne); 
10.     btn.addEventListener("click",eventTwo); 
11.     btn.removeEventListener("click",eventOne); 
12. } 

var eventOne = function(){
    alert("第一个监听事件");
}
function eventTwo(){
    alert("第二个监听事件");
}
window.onload = function(){
    var btn = document.getElementById("yuanEvent");
    btn.addEventListener("click",eventOne);
    btn.addEventListener("click",eventTwo);
    btn.removeEventListener("click",eventOne);
}

输出：第二个监听事件

3、解除绑定事件的时候一定要用函数的句柄，把整个函数写上是无法解除绑定的。
错误写法：

[javascript] view plain copy print ?

1. btn.addEventListener("click",function(){ 
2.     alert(11); 
3. }); 
4. btn.removeEventListener("click",function(){ 
5.     alert(11); 
6. }); 

btn.addEventListener("click",function(){
	alert(11);
});
btn.removeEventListener("click",function(){
	alert(11);
});

正确写法：

[javascript] view plain copy print ?

1. btn.addEventListener("click",eventTwo); 
2. btn.removeEventListener("click",eventOne); 

btn.addEventListener("click",eventTwo);
btn.removeEventListener("click",eventOne);

总结：对函数进行封装后的监听事件如下，兼容各大主流浏览器。

[javascript] view plain copy print ?

1. /*
2. * addEventListener:监听Dom元素的事件
3. * 
4. *  target：监听对象
5. *  type：监听函数类型，如click,mouseover
6. *  func：监听函数
7. */ 
8. function addEventHandler(target,type,func){ 
9.     if(target.addEventListener){ 
10.         //监听IE9，谷歌和火狐 
11.         target.addEventListener(type, func, false); 
12.     }else if(target.attachEvent){ 
13.         target.attachEvent("on" + type, func); 
14.     }else{ 
15.         target["on" + type] = func; 
16.     }  
17. } 
18. /*
19. * removeEventHandler:移除Dom元素的事件
20. * 
21. *  target：监听对象
22. *  type：监听函数类型，如click,mouseover
23. *  func：监听函数
24. */ 
25. function removeEventHandler(target, type, func) { 
26.     if (target.removeEventListener){ 
27.         //监听IE9，谷歌和火狐 
28.         target.removeEventListener(type, func, false); 
29.     } else if (target.detachEvent){ 
30.         target.detachEvent("on" + type, func); 
31.     }else { 
32.         delete target["on" + type]; 
33.     } 
34. } 
35. var eventOne = function(){ 
36.     alert("第一个监听事件"); 
37. } 
38. function eventTwo(){ 
39.     alert("第二个监听事件"); 
40. } 
41. window.onload = function(){ 
42.     var bindEventBtn = document.getElementById("bindEvent"); 
43.     //监听eventOne事件 
44.     addEventHandler(bindEventBtn,"click",eventOne); 
45.     //监听eventTwo事件 
46.     addEventHandler(bindEventBtn,"click",eventTwo ); 
47.     //监听本身的事件 
48.     addEventHandler(bindEventBtn,"click",function(){ 
49.         alert("第三个监听事件"); 
50.     }); 
51.     //取消第一个监听事件 
52.     removeEventHandler(bindEventBtn,"click",eventOne); 
53.     //取消第二个监听事件 
54.     removeEventHandler(bindEventBtn,"click",eventTwo); 
55. } 

/*
 * addEventListener:监听Dom元素的事件
 *  
 *  target：监听对象
 *  type：监听函数类型，如click,mouseover
 *  func：监听函数
 */
function addEventHandler(target,type,func){
    if(target.addEventListener){
        //监听IE9，谷歌和火狐
        target.addEventListener(type, func, false);
    }else if(target.attachEvent){
        target.attachEvent("on" + type, func);
    }else{
        target["on" + type] = func;
    } 
}
/*
 * removeEventHandler:移除Dom元素的事件
 *  
 *  target：监听对象
 *  type：监听函数类型，如click,mouseover
 *  func：监听函数
 */
function removeEventHandler(target, type, func) {
    if (target.removeEventListener){
        //监听IE9，谷歌和火狐
        target.removeEventListener(type, func, false);
    } else if (target.detachEvent){
        target.detachEvent("on" + type, func);
    }else {
        delete target["on" + type];
    }
}
var eventOne = function(){
    alert("第一个监听事件");
}
function eventTwo(){
    alert("第二个监听事件");
}
window.onload = function(){
    var bindEventBtn = document.getElementById("bindEvent");
    //监听eventOne事件
    addEventHandler(bindEventBtn,"click",eventOne);
    //监听eventTwo事件
    addEventHandler(bindEventBtn,"click",eventTwo );
    //监听本身的事件
    addEventHandler(bindEventBtn,"click",function(){
        alert("第三个监听事件");
    });
    //取消第一个监听事件
    removeEventHandler(bindEventBtn,"click",eventOne);
    //取消第二个监听事件
    removeEventHandler(bindEventBtn,"click",eventTwo);
}

[javascript] view plain copy print ?

1.  

实例：

[html] view plain copy print ?

1. <!DOCTYPE html> 
2. <html> 
3.     <head> 
4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
5.         <title>Event</title> 
6.         <script type="text/javascript"> 
7.             function addEventHandler(target,type,func){ 
8.                 if(target.addEventListener){ 
9.                     //监听IE9，谷歌和火狐 
10.                     target.addEventListener(type, func, false); 
11.                 }else if(target.attachEvent){ 
12.                     target.attachEvent("on" + type, func); 
13.                 }else{ 
14.                     target["on" + type] = func; 
15.                 }  
16.             } 
17.             function removeEventHandler(target, type, func) { 
18.                 if (target.removeEventListener){ 
19.                     //监听IE9，谷歌和火狐 
20.                     target.removeEventListener(type, func, false); 
21.                 } else if (target.detachEvent){ 
22.                     target.detachEvent("on" + type, func); 
23.                 }else { 
24.                     delete target["on" + type]; 
25.                 } 
26.             } 
27.             var eventOne = function(){ 
28.                 alert("第一个监听事件"); 
29.             } 
30.             function eventTwo(){ 
31.                 alert("第二个监听事件"); 
32.             } 
33.             window.onload = function(){ 
34.                 var bindEventBtn = document.getElementById("bindEvent"); 
35.                 //监听eventOne事件 
36.                 addEventHandler(bindEventBtn,"click",eventOne); 
37.                 //监听eventTwo事件 
38.                 addEventHandler(bindEventBtn,"click",eventTwo ); 
39.                 //监听本身的事件 
40.                 addEventHandler(bindEventBtn,"click",function(){ 
41.                     alert("第三个监听事件"); 
42.                 }); 
43.                 //取消第一个监听事件 
44.                 removeEventHandler(bindEventBtn,"click",eventOne); 
45.                 //取消第二个监听事件 
46.                 removeEventHandler(bindEventBtn,"click",eventTwo); 
47.             } 
48.         </script> 
49.  
50.  
51.     </head> 
52.     <body> 
53.         <input type="button" value="测试" id="bindEvent"> 
54.         <input type="button" value="测试2" id="yuanEvent"> 
55.     </body> 
56. </html>