网景提出事件捕获(event capturing)的事件流。事件会从DOM模型的最外层开始发生，直到内部触发事件的元素为止。
当 button 单击时: document -> html -> body -> button
事件冒泡
微软提出了事件冒泡(event bubbling)的事件流。事件会从触发事件的元素开始，一直向上层传播，直到 document 元素。事件冒泡可以形象地理解为:一颗石头投入水中，泡泡从水底冒出,越变越大。
-> 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元素")
}