事件流: 当你在页面触发一个点击事件后, 页面上不仅仅有一个元素响应该事件而是多个元素响应同一个事件, 因为元素是在容器中的. 事件发生的顺序就是事件流, 不同的浏览器对事件流的处理不同.
JavaScript 中的事件流模型:
冒泡事件流:
当触发一个节点的事件时, 会从当前节点开始, 依次触发其祖先节点的同类型事件,
直到 DOM 根节点 .
捕获事件流:
当触发一个节点的事件时, 会从 DOM 根节点开始, 依次触发其祖先节点的同类型事件,
知道当前节点自身 .
DOM 事件流:
dom 同时支持两种事件模型, 但捕获性事件先开始, 从 document 开始也结束于 document,dom 模型的独特之处在于文本也可以触发事件.
什么时候是事件冒泡? 事件捕获?
当使用 addEventListener 绑定事件, 第三个参数设为 true 时表示事件捕获, 除此之外的所有事件均为事件冒泡.
阻止事件冒泡
1IE10 之前, 使用 e.cancelBubble = true;
2IE10 之后, 使用 e.stopPropagation();
- function myParagraphEventHandler(e) {
- e = e || Windows.event;
- if (e.stopPropagation) {
- e.stopPropagation(); //IE10 之后
- } else {
- e.cancelBubble = true; //IE10 之前 } }
阻止默认事件
1IE10 之前: e.returnValue = false;
2IE10 之后: e.stopPropagation();
- function eventHandler(e) {
- e = e || Windows.event;
- // 防止默认行为
- if (e.preventDefault) {
- e.preventDefault(); //IE10 之外
- }else { e.returnValue = false; //IE10 之前 } }
来源: http://www.css88.com/qa/javascript/11266.html