冒泡，捕获事件

IE使用的是事件冒泡，其他浏览器则是事件捕获

他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。

绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。

Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。

这是HTML结构：

<div id="parent">
　	<div id="child" class="child"></div>
</div>

现在我们给它们绑定上事件

document.getElementById("parent").addEventListener("click",function(e){
            alert("parent事件被触发，"+this.id);
        })
document.getElementById("child").addEventListener("click",function(e){
            alert("child事件被触发，"+this.id)
        })

结果：
child事件被触发，child
parent事件被触发，parent
结论：先child，然后parent。事件的触发顺序自内向外，这就是事件冒泡。
现在改变第三个参数的值为true

document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发，"+e.target.id);
            },true)
document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发，"+e.target.id)
            },true)

结果：
parent事件被触发，parent
child事件被触发，child
结论：先parent,然后child。事件触发顺序变更为自外向内，这就是事件捕获。

IE采用attachEvent:
多次绑定后执行的顺序是不一样的，attachEvent是后绑定先执行，addEventListener是先绑定先执行。

this指向window,而不是当前对象

绑定时间时，attachEvent必须带on，如onclick，onmouseover等，而addEventListener不能带on，如click，mouseover。

attachEvent仅需要传递两个参数，而addEventListener需要传递三个参数，这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序为：捕获阶段（根节点到子节点检查是否调用了监听函数）→目标阶段（目标本身）→冒泡阶段（目标本身到根节点）。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。如果useCapture 为 false，则侦听器只在目标或冒泡阶段处理事件。要在所有三个阶段都侦听事件，请调用两次 addEventListener，一次将 useCapture 设置为 true，第二次再将useCapture 设置为 false。

执行顺序：先捕获再冒泡

事件冒泡用处
1、子元素太多
2、后插入元素的事件绑定问题
不是所有的事件都能冒泡，例如：blur、focus、load、unload
\mouseleave,mouseEnter

事件代理/委托

利用事件冒泡。把子元素的事件绑定给父元素。

$companyList.on('click', 'li', function() {...});

事件委托的局限性：有些事件没有冒泡行为，focus，blur没有

事件冒泡，捕获，委托

冒泡，捕获事件

事件代理/委托

猜你喜欢