事件的捕获、冒泡、委托

原声JavaScript中，事件是不可缺少的，HTML就是通过事件才能与JavaScript进行交互。其实事件流就是当你点击一个按钮的时候，这个按钮是在HTML和body上的，自然的，点击按钮的时候相当于点击了HTML和body，如果按钮放在一个div里面，那么点击按钮的时候相当于点击了div,这样就会出发一系列的事件，这就是事件流。事件具有冒泡流和捕获流，两者刚好是反着来。

JavaScript原声监听事件addEventListener，接收两个参数，一个是方法，一个是布尔值，指定事件是否在捕获或冒泡阶段执行。所以我们可以很直观的打印输出事件的冒泡和捕获两个过程。

输出顺序是body 捕获、test 捕获、test 冒泡、body 冒泡。

由此可以看出，事件都是从最外层开始捕获，层层递进，然后找到目标函数，也就是button所在位置，然后开始层层往外冒泡。

当我们增加了目标函数的点击事件，那么事件就不会遵守先发生捕获后再发生冒泡这一规则

输出顺序是body 捕获、test onclick 、test 冒泡、test 捕获、body 冒泡，但是事件还是需要遵循外层事件捕获了，目标函数才能执行。如果我在body捕获阶段就阻止了事件流，那么目标函数是不会执行的。

只输出body 捕获。

stopPropagation既可以阻止事件的捕获还能阻止事件的冒泡，如果我在test冒泡阻止了事件的冒泡，那么就不会输出body冒泡。

事件委托是什么，我相信很多用jQuery添加元素的时候（append）,，都遇见过添加的元素点击事件无法响应，其实这就是事件的委托。我们一般会用on方法或者绑定在body上面来达到append的元素的点击方法可以执行。一般我们给li添加点击事件是这样的

但其实我们可以用事件委托

这就是事件委托，事件委托好处就是添加进来的元素也能绑定事件。

对于事件，在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分，但是由于事件冒泡被所有主流的浏览器兼容，从兼容性角度来说还是建议大家使用事件冒泡模型。这就是事件的捕获、冒泡、委托。

欢迎关注 Coding 个人笔记公众号

相关文章：