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

事件冒泡：当一个元素接收到事件的时候，会把他接收到的事件传给自己的父级（只传递事件），一直到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;复制代码

事件捕获

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

事件流

一个完整的js事件流从Window开始，最后回到Window的一个过程

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

事件委托

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

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