前言:
写的目的主要是细化到具体的参数
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两个值,所以有六种排列
测试结果:
- 设置了true的触发的顺序永远在false之前。
比如:我修改了innerP的true,在点击
innerChild的时候触发顺序还是
innerP在前。
2. 全为
false的话
点击
innerChild触发的顺序是
innerChild-------innerP------outDiv
3. 全为
true的话
点击
innerChild触发的顺序是
outDiv------innerP-------innerChild
b. 下面说说
第二个参数listener
- 可以附加多个事件处理函数,执行顺序按照绑定的先后
- 还有就是关于处理函数删除的问题,使用addEventListener()将事件处理函数加入到捕获阶段,则必须在removeEventListener()中指明是捕获阶段,才能正确地删除这个事件处理函数。
使用传统的方法直接给事件处理函数属性赋值,事件处理函数将被添加到事件的冒泡阶段。
- var out = document.getElementById('out');
- out.onclick = fnClick;
- out.addEventListener('click',fnClick,false);
但是直接赋值的不同点在于,后续对事件处理函数的赋值会清除前面的赋值。