js中添加事件 attachEvent 与 addEventListener

给元素添加事件时，使用js进行实现时产生了疑惑，有关事件浏览器兼容的问题，在此记录如下。

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>IFE JavaScript Task 01</title>
 6 </head>
 7 <body>
 8 
 9 <label>请输入北京今天空气质量：<input id="aqi-input" type="text"></label>
10 <button id="button">确认填写</button>
11 
12 <div>您输入的值是：<span id="aqi-display">尚无录入</span></div>
13 
14 <script type="text/javascript">
15 
16     (function() {
17         /*
18          在注释下方写下代码
19          给按钮button绑定一个点击事件
20          在事件处理函数中
21          获取aqi-input输入的值，并显示在aqi-display中
22          */
23         var zhiliang = document.getElementById("aqi-input");
24         var button1 = document.getElementById("button");
25         var display = document.getElementById("aqi-display");
26        addEvent(button1,"click",function(){
27            display.childNodes[0].nodeValue=zhiliang.value;
28        })
29     })();
30      function addEvent(elme,type,func){
31          if(elme.addEventListener){
32              elme.addEventListener(type,func);
33          }
34          else if(elme.attachEvent){
35              elme.attachEvent("on"+type,func)
36          }
37          else{
38              elem["on"+type] = func;
39          }
40      }
41 
42 
43 </script>
44 </body>
45 </html>
实际处理相关

实例如上。

其实并没有体现为什么要用attachEvent或是addEventListener。

因为我们常用的 obj.onclick = method这样的方式也可达到效果，但是为什么要提出这个呢，因为点击按钮可能要触发多个方法，而此时，method不可以实现，如果去写三个method，结果也只会执最后一个定义的方法。

其实就是看哪个浏览器兼容哪个了，还有参数不一样，大体上是这两个区别，还有其处理程序的作用域不尽相同。  

下面介绍 addEventListener( )  事件类型 不加on  ； 触发事件（函数）   ；布尔值，指定事件是否在捕获或冒泡阶段执行；这个没太懂。

 兼容性：  firefox、chrome、IE、safari、opera；不兼容IE7、IE8

addEventLinstener添加的事件处理程序是在其依附的元素的作用域中运行。

所以还是这个是值得使用的，另一个就是为了兼容而做的准备。  但是也要注意兼容性，最好还是像代码中所写。

 

 attachEvent   on+事件类型  ； 触发事件；

兼容性： 兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera    

attachEvent的事件处理程序会在全局作用域中运行。

 

如上，js原生触发事件总结~

posted @ 2016-10-31 20:33  柚子9527  阅读(1396)  评论(0)  编辑  收藏  举报