JavaScript 事件处理机制

DOM 事件流

DOM 是一个树型结构，当一个HTML元素产生一个事件时，该事件会在该元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。而事件传播的顺序分为两种类型：事件捕捉和事件冒泡。

事件捕获
网景提出事件捕获(event capturing)的事件流。事件会从DOM模型的最外层开始发生，直到内部触发事件的元素为止。
当 button 单击时: document -> html -> body -> button

事件冒泡
微软提出了事件冒泡(event bubbling)的事件流。事件会从触发事件的元素开始，一直向上层传播，直到 document 元素。事件冒泡可以形象地理解为:一颗石头投入水中，泡泡从水底冒出,越变越大。

当 button 单击时: button -> body -> html -> document

最终标准
后来 w3c 采用折中的方式，统一的标准: 先捕获再冒泡。然而,并非所有的事件都会经过冒泡阶段,比如 focus/blur 事件就不会冒泡.

//useCapture 是否使用事件捕方式,默认为 false (冒泡) ,在这里只展示了 addEventListener 最基本应用.
element.addEventListener(event, function, useCapture)

element.addEventListener 可以给绑定多次.同时也调用 element.removeEventListener 移除绑定事件,而 element.onclick = funcA 形式,只会以最后一个绑定为准. 

总体上来说,事件捕获先于事件冒泡, 即当一个元素绑定了两种事件传播方式的处理函数时,无论代码书写顺序如何,总是先执行捕获后执行冒泡.但这也并非绝对,当该元素同时是触发事件的元素时,则以代码书写顺序为准.

示例: 下面代码,有子父级两个元素,其中父级元素绑定了两种传播方式的回调.

当单击子元素时: click-parent--事件捕获 --> click-child---事件冒泡 --> click-parent--事件冒泡
当单击父元素时: click-parent--事件冒泡 --> click-parent--事件捕获

document.getElementById('parent').addEventListener("click",function(e){

    console.log("click-parent---事件冒泡");

},false);

document.getElementById('parent').addEventListener("click",function(e){

    console.log("click-parent--事件捕获");

},true);

document.getElementById('child').addEventListener("click",function(e){

    console.log("click-child---事件冒泡");

},false); 


事件代理
我们知道事件会在当前元素与根元素之间传递,所以说,在一个元素上产生的事件会向上传递给它的父元素,而不会向下传递给它的子元素.
利用事件流的特性,我们可以实现用在父级元素上绑定事件,再通过子元素去触发,省去了给众多子元素绑定事件的开销.

parent.onclick = function(e){

    if(e.target.id == "child")  console.log("点击了child元素")   

}