）在捕获阶段不会接收事件。也就是在捕获阶段，事件从document到再到就停止了。上图中为1~3.

@H_404_0@处于目标阶段：事件在 @H_404_0@运行效果就是会陆续弹出6个框，为说明原理我整合成了一个图：

@H_404_0@

3、事件流的典型应用——事件代理

@H_404_0@传统的事件处理中，需要为每个元素添加事件处理器。js事件代理则是一种简单有效的技巧，通过它可以把事件处理器添加到一个父级元素上，从而避免把事件处理器添加到多个子级元素上。

@H_404_0@事件代理的原理用到的就是事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素事件冒泡，并且父元素能够通过target（IE为srcElement）判断是哪个子元素，从而做相应处理。关于target更多内容请参考属性和方法）下面举例来说明。

@H_404_0@传统事件处理，为每个元素添加事件处理器，代码如下：

@H_404_0@事件代理的处理方式，代码如下：

@H_404_0@

总结一下事件代理的好处：

@H_404_0@a、将多个事件处理器减少到一个，因为事件处理器要驻留内存，这样就提高了性能。想象如果有一个100行的表格，对比传统的为每个单元格绑定事件处理器的方式和事件代理（即table上添加一个事件处理器），不难得出结论，事件代理确实避免了一些潜在的风险，提高了性能。

@H_404_0@b、DOM更新无需重新绑定事件处理器，因为事件代理对不同子元素可采用不同处理方法。如果新增其他子元素（a,span,div等），直接修改事件代理的事件处理函数即可，不需要重新绑定处理器，不需要再次循环遍历。

@H_404_0@以上所述是小编给大家介绍的JavaScript事件学习小结（一）事件流的相关知识，希望对大家有所帮助！

原文链接：https://www.f2er.com/js/48002.html