javascript中attachEvent、addEventListener用法和区别

最新推荐文章于 2023-08-09 08:56:04 发布

lechen1013

最新推荐文章于 2023-08-09 08:56:04 发布

阅读量333

点赞数

一般我们在JS中添加事件,是这样子的

obj.οnclick=method

这种绑定事件的方式，兼容主流浏览器,但如果一个元素上添加多次同一事件呢?

1

2

3

 
          obj.onclick=method1 
         
          obj.onclick=method2 
         
          obj.onclick=method3

如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,在IE中我们可以使用attachEvent方法

1

2

3

 
          btn1Obj.attachEvent( 
          "onclick" 
          ,method1); 
         
 
          btn1Obj.attachEvent( 
          "onclick" 
          ,method2); 
         
 
          btn1Obj.attachEvent( 
          "onclick" 
          ,method3); 
         

使用格式是前面是事件类型,注意的是需要加on,比如onclick,onsubmit,onchange,执行顺序是

method3->method2->method1

可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法

1

2

3

 
          btn1Obj.addEventListener( 
          "click" 
          ,method1, 
          false 
          ); 
         
 
          btn1Obj.addEventListener( 
          "click" 
          ,method2, 
          false 
          ); 
         
 
          btn1Obj.addEventListener( 
          "click" 
          ,method3, 
          false 
          ); 
         

执行顺序为method1->method2->method3

 
          <!DOCTYPE html PUBLIC  
          "-//W3C//DTD XHTML 1.0 Transitional//EN" 
         
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
          > 
         
          <html xmlns= 
          "http://www.w3.org/1999/xhtml" 
          > 
         
          <head> 
         
          <title>attachEvent</title> 
         
          <script type= 
          "text/javascript" 
          > 
         
          //第一种方式(微软的私人方法) 
         
          function 
           iniEvent() { 
         
          var 
           btn = document.getElementById( 
          "btn" 
          ); 
         
          btn.attachEvent( 
          "onclick" 
          , click1); 
         
          btn.attachEvent( 
          "onclick" 
          , click2); 
         
          btn.attachEvent( 
          "onclick" 
          , click3); 
         
          } 
         
          //第二种方式(火狐和其他浏览器) 
         
          function 
           iniEvent2() { 
         
          var 
           btn = document.getElementById( 
          "btn" 
          ); 
         
          btn.addEventListener( 
          "click" 
          , click1,  
          false 
          ); 
         
          btn.addEventListener( 
          "click" 
          , click2,  
          false 
          ); 
         
          btn.addEventListener( 
          "click" 
          , click3,  
          false 
          ); 
         
          } 
         
          function 
           click1() { 
         
          alert( 
          'click1' 
          ); 
         
          } 
         
          function 
           click2() { 
         
          alert( 
          'click2' 
          ); 
         
          } 
         
          function 
           click3() { 
         
          alert( 
          'click3' 
          ); 
         
          } 
         
          </script> 
         
          </head> 
         
          <body onload= 
          "iniEvent()" 
          > 
         
          <input type= 
          "button" 
           id= 
          "btn" 
           value= 
          "attachEvent" 
           /> 
         
          </body> 
         
          </html>