事件冒泡、事件捕获、事件委托

事件冒泡：

当一个元素接收到事件的时候，会把他接收到的事件传给自己的父级（只传递事件），一直到window（小鱼吐泡泡） 例如:

<div id="parent"> <div id="children"></div></div> var parent = document.querySelector('#parent') var children = document.querySelector('#children') parent.onclick = function () { console.log('parent') } children.onclick = function () { console.log('children')}

控制台输出结果：

children parent

备注：点击事件给页面显示出来的位置是没关系的

取消事件冒泡

标准的W3C方式：

e.stopPropagation();

非标准的IE方式

e.cancelBubble = true;

阻止默认行为

return false;

事件捕获

事件捕获的顺序跟事件冒泡的顺序刚好相反

事件流

1-5捕获过程 5-6目标过程 6-10 冒泡过程

事件委托

事件委托，又叫事件代理，原理就是利用冒泡，只指定一个事件处理程序，用来管理某一类型的所有事件。

例子：前台代收快递的妹子