首页 > 语言 > JavaScript > 正文

js事件监听器用法实例详解

2024-05-06 16:21:07
字体：大 中 小
来源：转载
供稿：网友

这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下

本文实例讲述了js事件监听器用法。分享给大家供大家参考。具体分析如下：

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

 

 
  1. 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. } 

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

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

 

 
  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. } 

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

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

 

 
  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. } 

输出：第二个监听事件

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

错误写法：

 

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

正确写法：

 

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

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

 

 
  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. }  

实例：

 

 
  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. </head>  
  50. <body>  
  51. <input type="button" value="测试" id="bindEvent">  
  52. <input type="button" value="测试2" id="yuanEvent">  
  53. </body>  
  54. </html> 

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：JS实现屏蔽shift，Ctrl，alt等功能键的方法

下一篇：JS实现兼容各浏览器解析XML文档数据的方法

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿 创2023年5月以来最大单周涨幅
2024-04-27 13:35:46
雷军：小米正在申请3万件专利，以提升自身的竞争力
2024-04-27 13:33:47
人参泡酒15年后竟“复活”？网友：这酒还能喝不？
2024-04-24 22:53:44
芯片股普涨！英伟达市值一夜大涨6000亿元
2024-04-23 19:32:50
面馆老板1天卖100碗刚够交房租 要卖到150碗才能实现盈利
2024-04-23 19:25:50
跌近30%！茶百道上市一小时跌没3年净利润
2024-04-23 19:13:19

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有