addEventListener等事件监听的参数细谈

原文链接：http://zhangyaochun.iteye.com/blog/1270659

写的目的主要是细化到具体的参数，兼容性的文章可以参考其他我博客的文章。

 

1.addEventListener(type,listener.useCapture)

 

 

• type              字符串，事件名称，如'click'等 不需要'on'前缀
• listener         事件处理的函数，实现EventListener接口
• useCapture   是否使用捕获--- true为捕获，false为冒泡

a.  先从第3个参数开始吧。

/*  html文档树结构  */  <div id="out">     <div id="innerP">           <div id="innerChild">最里面的孩子</div>     </div>  </div>    <div id="showInfo"></div>  

var out = document.getElementById('out');  var innerP = document.getElementById('innerP');  var innerChild = document.getElementById('innerChild');  var infoShow = document.getElementById('infoShow');  /* 绑事件 */  out.addEventListener('click',function(){infoShow.innerHTML += 'outDiv' + '<br />'},false);    innerP.addEventListener('click',function(){infoShow.innerHTML += 'innerP' + '<br />'},false);    innerChild.addEventListener('click',function(){infoShow.innerHTML += 'innerChild' + '<br />'},false);  

测试原理设计：

       因为我们测试的是第3个参数,它有true和false两个值，所以有六种排列

测试结果：

1. 设置了true的触发的顺序永远在false之前。

比如：我修改了innerP的true,在点击innerChild的时候触发顺序还是innerP在前。

     2.  全为false的话

点击innerChild触发的顺序是innerChild-------innerP------outDiv

     3. 全为true的话

点击innerChild触发的顺序是outDiv------innerP-------innerChild