事件流:
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