事件冒泡&事件捕获和事件委托

一、什么是事件
1、事件是文档和浏览器窗口中发生的特定的交互瞬间。 事件是javascript应用跳动的心脏，也是把所有东西黏在一起的胶水，当我们与浏览器中web页面进行某些类型的交互时，事件就发生了。

2、事件可能是用户在某些内容上的点击，鼠标经过某个特定元素或按下键盘上的某些按键，事件还可能是web浏览器中发生的事情，比如说某个web页面加载完成，或者是用户滚动窗口或改变窗口大小。

二、事件冒泡

点击冒泡

// 输出结果
p标签被点击
button被点击
div被点击
body被点击
从上述例子可以看出，事件冒泡是逐级向上传播的

三、事件捕获

点击捕获

// 输出结果
body被点击
div被点击
button被点击
p标签被点击
从上述例子可以看出，捕获和冒泡完全相反，事件捕获是逐级往下传播的

四、DOM事件流
“DOM2事件”规定的事件流包含3个阶段，分别为：事件捕获阶段、处于目标阶段、事件冒泡阶段。

DOM事件流

// 输出
event catch 事件捕获
div 处于目标阶段
event bubble 事件冒泡
从上述例子可以看出，事件流执行顺序为：事件捕获->目标事件→事件冒泡

五、阻止冒泡
event.stopPropagation();

即该方法不仅仅可以阻止冒泡，还可以阻止捕获和处于目标阶段。

六、阻止捕获
我们可以使用DOM3级新增事件stopImmediatePropagation()方法来阻止事件捕获，另外此方法还可以阻止事件冒泡。应用如下：

document.getElementById(“second”).addEventListener(“click”,function(){
alert(“second”);
event.stopImmediatePropagation();
},true);
那么 stopImmediatePropagation() 和 stopPropagation()的区别在哪儿呢？

1、stopImmediatePropagation方法：

stopImmediatePropagation方法作用在当前节点以及事件链上的所有后续节点上，目的是在执行完当前事件处理程序之后，停止当前节点以及所有后续节点的事件处理程序的运行

2、stopPropagation方法

stopPropagation方法作用在后续节点上，目的在执行完绑定到当前元素上的所有事件处理程序之后，停止执行所有后续节点的事件处理程序

在调用完stopPropagation函数之后，就会立即停止对后续节点的访问，但是会执行完绑定到当前节点上的所有事件处理程序；而调用stopImmediatePropagation函数之后，除了所有后续节点，绑定到当前元素上的、当前事件处理程序之后的事件处理程序就不会再执行了

注意：尽管这是Netscape Navigator提出的事件流，但是现在所有的浏览器都支持这种事件流模型。但是由于老的浏览器不支持，所以很少有人使用事件捕获。

七、事件委托
事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

举个通俗的例子

比如一个宿舍的同学同时快递到了，一种方法就是他们一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一 一分发给每个宿舍同学；

在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM 元素，而出去统一领取快递的宿舍长就是代理的元素，所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

实现功能
基本实现

比如我们有这样的一个 HTML 片段：

• item 1
• item 2
• item 3
• ......
• item n

// ...... 代表中间还有未知数个 li

我们来实现把 #list 下的 li 元素的事件代理委托到它的父层元素也就是 #list 上：

// 给父层元素绑定事件
document.getElementById(‘list’).addEventListener(‘click’, function (e) {
// 兼容性处理 var event = e || window.event;
var target = event.target || event.srcElement;
// 判断是否匹配目标元素
if (target.nodeName.toLocaleLowerCase === ‘li’) {
console.log('the content is: ', target.innerHTML);
}
});

在上述代码中， target 元素则是在 #list 元素之下具体被点击的元素，然后通过判断 target 的一些属性（比如：nodeName，id 等等）可以更精确地匹配到某一类 #list li 元素之上；