js事件监听 JS:attachEvent和addEventListener 使用方法

• 一、适应的浏览器版本不同

  mozilla中：
  
  addEventListener的使用方式：
  
  target.addEventListener(type, listener, useCapture);
  
  target： 文档节点、document、window 或 XMLHttpRequest。
  type： 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
  listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
  useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
  
  IE中：
  
  target.attachEvent(type, listener);
  target： 文档节点、document、window 或 XMLHttpRequest。
  type： 字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
  listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。 例如：document.getElementById("txt").attachEvent("onclick",function(event) {alert(event.keyCode);});

   

  
  

   

  三、参数的个数不同

  attachEvent方法两个参数：第一个参数为事件名称，第二个参数为接收事件 处理的函数； addEventListener 有三个参数：第一个参数表示事件名称（不含 on，如 "click"）；第二个参数表示要接收事件处理的函数；第三个参数是一个bool值，一般为false

  第三个参数叫做useCapture，是一个 boolean值，就是true or false，如果送出true的话就是瀏览器会使用Capture方式，false的话是Bubbling，只有在特定状况下才会有影响，通常建议是 false，而会有影响的情形是目标元素(target element)有祖先元素(ancestor element)，而且也有同样的事件对应函数，我想，看图会比较清楚。

   

  

  像这张图所显示的，我的范例有两层div元素，而且 都设定有click事件，一般来说，如果我在内层蓝色的元素上click不只会触发蓝色元素的click事件，还会同时触发红色元素的click事件，而 useCapture这个参数就是在控制这时候两个click事件的先后顺序。如果是false，那就会使用bubbling，他是从内而外的流程，所以 会先执行蓝色元素的click事件再执行红色元素的click事件，如果是true，那就是capture，和bubbling相反是由外而内，会先执行 红色元素的click事件才执行蓝色元素的click事件。附上两个范例，capture和bubbling，两个档案只有差在此一参数不同，可以发现事 件的发生顺序不一样了。

  那如果不同层的元素使用的useCapture不同呢？就是会先从最外层元素往目标元素寻找设定为capture的事件，到达目标元素执行目标元素的事件后，再寻原路往外寻找设定为bubbling的事件。

   

  四、执行事件的优先级不同

  <div id="outDiv">
     <div id="middleDiv">
       <div id="inDiv">请在此点击鼠标。</div>
     </div>
  </div>
  
  <div id="info"></div>
  
  
  var outDiv = document.getElementById("outDiv");
  var middleDiv = document.getElementById("middleDiv");
  var inDiv = document.getElementById("inDiv");
  var info = document.getElementById("info");
  
  outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, false);
  middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);
  inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, false);
  上述是我们测试的代码，根据 info 的显示来确定触发的顺序，有三个 addEventListener，而 useCapture 可选值为 true 和 false，所以 2*2*2，可以得出 8 段不同的程序。
  
  全为 false 时，触发顺序为：inDiv、middleDiv、outDiv；
  全为 true 时，触发顺序为：outDiv、middleDiv、inDiv；
  outDiv 为 true，其他为 false 时，触发顺序为：outDiv、inDiv、middleDiv；
  middleDiv 为 true，其他为 false 时，触发顺序为：middleDiv、inDiv、outDiv；
  ……
  最终得出如下结论：
  
  true 的触发顺序总是在 false 之前；
  如果多个均为 true，则外层的触发先于内层；
  如果多个均为 false，则内层的触发先于外层。
  下面提供全部代码，您可以更改其中的 true、false 值，来进行测试。注意，不适用于 IE

 

五、对this的引用不同

attachEvent绑定的函数,没有绑定this引用

1. function doIt(){   
2.     alert(this);   
3. }  

然后我们在页面中处理如下：
首先做一个按钮：<button id="btn">按钮</button>，然后为该按钮绑定事件onclick如下：

 

1. <script language="javascript" type="text/javascript">   
2. document.getElementById("btn4").attachEvent("onclick",doIt);   
3. </script>  

经过这种处理之后，doIt方法中的this不代表button,但是使用
      document.getElementById("btn4").onclick = doIt时this指向的就是btn代表的button了,
     还有就是
      document.getElementById("btn4").addEventListener('click',doSomething,false)；这样也可以把this绑定进去

最后写一个兼容所有浏览器的监听事件方法如下：

//兼容所有浏览器的attachEvent方法
if(!window.attachEvent && window.addEventListener)
{
Window.prototype.attachEvent = HTMLDocument.prototype.attachEvent=
HTMLElement.prototype.attachEvent=function(en, func, cancelBubble)
{
var cb = cancelBubble ? true : false;
this.addEventListener(en.toLowerCase().substr(2), func, cb);
};
}

 

• target.addEventListener(type, listener, useCapture);  
• target 文档节点、document、window 或 XMLHttpRequest。  
• type 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。  
• listener 实现了 EventListener 接口或者是 JavaScript 中的函数。  
• useCapture 是否使用捕捉，看了后面的事件流一节后就明白了，一般用 false  
• 事件触发时，会将一个 Event 对象传递给事件处理程序，比如：  
• document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);  
• 适应的浏览器版本不同，同时在使用的过程中要注意  
• attachEvent方法          按钮onclick       IE中使用  
• addEventListener方法    按钮click       fox中使用  
• 两者使用的原理：可对执行的优先级不一样，下面实例讲解如下：  
• attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列）  
• addEventListener方法 用于 Mozilla系列  
• 举例: document.getElementById("btn").onclick = method1;  
• document.getElementById("btn").onclick = method2;  
• document.getElementById("btn").onclick = method3;如果这样写,那么将会只有medhot3被执行  
• 写成这样：  
• var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);  
• btn1Obj.attachEvent("onclick",method1);  
• btn1Obj.attachEvent("onclick",method2);  
• btn1Obj.attachEvent("onclick",method3);执行顺序为method3->method2->method1  
• 如果是Mozilla系列，并不支持该方法，需要用到addEventListener var btn1Obj = document.getElementById("btn1");  
• //element.addEventListener(type,listener,useCapture);  
• btn1Obj.addEventListener("click",method1,false);  
• btn1Obj.addEventListener("click",method2,false);  
• btn1Obj.addEventListener("click",method3,false);执行顺序为method1->method2->method3  
• 实例：(要注意的是div必须放到js前面才行)  
• <html>  
• <head>  
• </head>  
• <body>  
• <div id="name1" style="border:1px solid red;padding:10px 10px 10px 10px;" mce_style="border:1px solid red;padding:10px 10px 10px 10px;">  
• <div id="name2" style="border:1px solid green;padding:10px 10px 10px 10px;" mce_style="border:1px solid green;padding:10px 10px 10px 10px;">点击</div>  
• </div>  
• <div id="info"></div>  
• <mce:script type="text/javascript"><!--  
• var name1=document.getElementById('name1'); //要注意  
• var name2=document.getElementById('name2'); //要注意  
• var info=document.getElementById('info');  
• if(name1.attachEvent){ //对于attachEvent前面的target我们一定要保证不为空  
• name1.attachEvent('onclick',function () { info.innerHTML += "红色" + "<br>"; });  
• name2.attachEvent('onclick',function () { info.innerHTML += "绿色" + "<br>"; });  
• }else{  
• name1.addEventListener('click',function () { info.innerHTML += "红色" + "<br>"; },false);  
• name2.addEventListener('click',function () { info.innerHTML += "绿色" + "<br>"; },false);  
• }  
• // --></mce:script>  
• </body>  
• </html>
  

 

 

参考网址：

http://www.cnblogs.com/lidabo/archive/2012/04/01/2429128.html

http://blog.csdn.net/yiday/article/details/5009640

http://www.jb51.net/article/18220.htm