从 addEventListener(,,true/false)

来源：互联网发布：怎么读源码编辑：程序博客网时间：2024/05/22 14:19

事件流：
w3c约定的事件触发分为三个阶段，捕获阶段、目标阶段、冒泡阶段；
捕获阶段时，先触发最上层父元素的捕获阶段绑定函数，即从外层到里层触发，直至到达目标元素，此时进入目标阶段，按照绑定顺序触发所有目标元素的绑定函数，结束后进入冒泡阶段，触发上一级父元素的冒泡阶段绑定函数，即从里层到外层触发。

EventTarget.addEventListener() ：
target.addEventListener(type, listener[, useCapture]);
第三个参数，useCapture，是可选的，默认为false，且只有在部分浏览器中支持，true表明该事件监听器绑定在捕获阶段（和目标阶段），false则表明绑定在冒泡阶段（和目标阶段）。

Event.stopPropagation()：
w3school的说明：
定义和用法
不再派发事件。
终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
语法
event.stopPropagation()
说明
该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

测试：
http://jsfiddle.net/wmu4ewxy/1/

参考资料：

api，EventTarget.addEventListener()，Internet Explorer 的 attachEvent 方法，传统事件绑定方法等：https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
事件类型一览表：https://developer.mozilla.org/zh-CN/docs/Web/Events
w3c DOM-Level-3-Events，事件流说明：http://www.w3.org/TR/DOM-Level-3-Events/#event-flow
document.addeventlistener与window.addeventlistener的区别：http://stackoverflow.com/questions/12045440/difference-between-document-addeventlistener-and-window-addeventlistener
js-addEventListener()第三个参数useCapture，测试用例：http://www.cnblogs.com/loveyouyou616/p/3916345.html
stopPropagation() 方法：http://www.w3school.com.cn/jsref/event_stoppropagation.asp

0 0