夏日博客

A-A+

javascipt中事件绑定方法介绍

2016年10月16日 前端设计 暂无评论 阅读 5 views 次

在js中事件绑定有四种方法，包括有onXXX,dom,attachEvent,event这种种，下面我来简单的给各位朋友介绍相关的内定，本文章主要给大家介绍attachEvent事件，有需要的朋友可参考。

Javascript的事件绑定主要有四种方法（一下在IE中运行正常，但不保证其他浏览器）：

1、在DOM中，直接用onXXX="fun();"进行绑定

2、在Javascript代码中用 DOM对象.onXXX=fun 进行绑定

3、用 DOM对象.attachEvent("onXXX",fun) 进行绑定

4、用fun(); 进行绑定

例,代码如下:

  1. <html>  
  2. <head>  
  3. <script type="text/javascript">  
  4.     function test(){  
  5.         window.alert("你投了一票");  
  6.         //解除绑定 IE 独有  
  7.         //document.getElementById("tp").detachEvent("onclick",test);  
  8.         //W3C 标准  
  9.         document.getElementById("tp").removeEventListener("click",test);  
  10.     }  
  11.       
  12. </script>  
  13. </head>  
  14. <body>  
  15. <input type="button" id="tp" value="投票" />  
  16. </body>  
  17. <script>  
  18.     //绑定事件监听 IE独有  
  19.     //document.getElementById("tp").attachEvent("onclick",test);  
  20.     ////W3C 标准,xiariboke.net  
  21.     document.getElementById("tp").addEventListener("click",test);  
  22. </script>  
  23. </html>  

例,代码如下:

  1. function addEvent( obj, type, fn ) {  
  2.         if ( obj.attachEvent ) {  
  3.             obj['e'+type+fn] = fn;  
  4.             obj[type+fn] = function(){obj['e'+type+fn]( window.event );}  
  5.             obj.attachEvent( 'on'+type, obj[type+fn] );  
  6.         } else  
  7.             obj.addEventListener( type, fn, false );  
  8.     }  
  9.     function removeEvent( obj, type, fn ) {  
  10.         if ( obj.detachEvent ) {  
  11.             obj.detachEvent( 'on'+type, obj[type+fn] );  
  12.             obj[type+fn] = null;  
  13.         } else  
  14.             obj.removeEventListener( type, fn, false );  
  15.     }  

事件绑定BUG大家可参考参考,代码如下:

  1. <a id="link_foo">Foo</a><a id="link_foo">Foo</a>  
  2. <script type="text/javascript">  
  3. function bindFooClick(){  
  4.   $("#link_foo").click(function(){  
  5.     console.log "asd"  
  6.   });  
  7. }  
  8. bindFooClick();  
  9. bindFooClick();  
  10. bindFooClick();  
  11. bindFooClick();  
  12. </script>  

然后去点击 Foo 这个连接，将会出现4个日志输出,如果不小心这个事件绑定被搞得成倍增长了,那就等着暴掉吧,所以需要在 bindFooClick 绑定事件前去掉之前的绑定,代码如下:

  1. function bindFooClick(){  
  2.   $("#link_foo").unbind("click");  
  3.   $("#link_foo").bind("click", function(){  
  4.     console.log "asd"  
  5.   });  
  6. }  
标签：

给我留言