简单记录，学习参考

前言：

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

1.addEventListener(type,listener.useCapture)

• type              字符串，事件名称，如'click'等 不需要'on'前缀

• listener         事件处理的函数，实现EventListener接口

• useCapture   是否使用捕获--- true为捕获，false为冒泡

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

Html代码  

1. /*  

2. html文档树结构  

3. */  

4. <div id="out">  

5.    <div id="innerP">  

6.          <div id="innerChild">最里面的孩子</div>  

7.    </div>  

8. </div>  

9.   

10. <div id="showInfo"></div>  

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

<div id="showInfo"></div>

Js代码

1. var out = document.getElementById('out');  

2. var innerP = document.getElementById('innerP');  

3. var innerChild = document.getElementById('innerChild');  

4. var infoShow = document.getElementById('infoShow');  

5. /* 

6. 绑事件 

7. */  

8. out.addEventListener('click',function(){infoShow.innerHTML += 'outDiv' + '<br />'},false);  

9.   

10. innerP.addEventListener('click',function(){infoShow.innerHTML += 'innerP' + '<br />'},false);  

11.   

12. innerChild.addEventListener('click',function(){infoShow.innerHTML += 'innerChild' + '<br />'},false);  

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

b.  下面说说第二个参数listener

•   可以附加多个事件处理函数，执行顺序按照绑定的先后

•   还有就是关于处理函数删除的问题，使用addEventListener()将事件处理函数加入到捕获阶段，则必须在removeEventListener()中指明是捕获阶段，才能正确地删除这个事件处理函数。 

  使用传统的方法直接给事件处理函数属性赋值，事件处理函数将被添加到事件的冒泡阶段。

Js代码

1. var out = document.getElementById('out');  

2. out.onclick = fnClick;  

3. out.addEventListener('click',fnClick,false);  

var out = document.getElementById('out');
out.onclick = fnClick;
out.addEventListener('click',fnClick,false);

  但是直接赋值的不同点在于，后续对事件处理函数的赋值会清除前面的赋值。