介绍事件“捕获”和“冒泡”执行顺序和事件的执行次数

• 按照W3C标准的事件：首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段
• 事件执行次数（DOM2-addEventListener）：元素上绑定事件的个数
  • 注意1：前提是事件被确实触发
  • 注意2：事件绑定几次就算几个事件，即使类型和功能完全一样也不会“覆盖”
• 事件执行顺序：判断的关键是否目标元素
  • 非目标元素：根据W3C的标准执行：捕获->目标元素->冒泡（不依据事件绑定顺序）
  • 目标元素：依据事件绑定顺序：先绑定的事件先执行（不依据捕获冒泡标准）
  • 最终顺序：父元素捕获->目标元素事件1->目标元素事件2->子元素捕获->子元素冒泡->父元素冒泡
  • 注意：子元素事件执行前提 事件确实“落”到子元素布局区域上，而不是简单的具有嵌套关系

在一个DOM上同时绑定两个点击事件：一个用捕获，一个用冒泡。事件会执行几次，先执行冒泡还是捕获？

• 该DOM上的事件如果被触发，会执行两次（执行次数等于绑定次数）
• 如果该DOM是目标元素，则按事件绑定顺序执行，不区分冒泡/捕获
• 如果该DOM是处于事件流中的非目标元素，则先执行捕获，后执行冒泡

事件的代理/委托

• 事件委托是指将事件绑定目标元素的到父元素上，利用冒泡机制触发该事件
  • 优点：
    • 可以减少事件注册，节省大量内存占用
    • 可以将事件应用于动态添加的子元素上
  • 缺点： 使用不当会造成事件在不应该触发时触发
  • 示例：

ulEl.addEventListener('click', function(e){
    var target = event.target || event.srcElement;
    if(!!target && target.nodeName.toUpperCase() === "LI"){
        console.log(target.innerHTML);
    }
}, false);
1
2
3
4
5
6

W3C事件的 target 与 currentTarget 的区别？

• target 只会出现在事件流的目标阶段
• currentTarget 可能出现在事件流的任何阶段
• 当事件流处在目标阶段时，二者的指向相同
• 当事件流处于捕获或冒泡阶段时：currentTarget 指向当前事件活动的对象(一般为父级)

如何派发事件(dispatchEvent)？（如何进行事件广播？）

• W3C: 使用 dispatchEvent 方法
• IE: 使用 fireEvent 方法

var fireEvent = function(element, event){
    if (document.createEventObject){
        var mockEvent = document.createEventObject();
        return element.fireEvent('on' + event, mockEvent)
    }else{
        var mockEvent = document.createEvent('HTMLEvents');
        mockEvent.initEvent(event, true, true);
        return !element.dispatchEvent(mockEvent);
    }
}
1
2
3
4
5
6
7
8
9
10