DEV Community
·
事件流：冒泡与捕获
内容提要
事件传播机制包括事件冒泡和事件捕获。事件冒泡是指事件从目标元素向上传播到根元素，而事件捕获则是从根元素向下传播到目标元素。默认情况下，事件处理程序在目标和冒泡阶段被调用，第三个参数可用于在捕获阶段设置处理程序。使用event.stopPropagation()可以阻止事件进一步传播。
关键要点
-
事件传播机制包括事件冒泡和事件捕获。
-
事件冒泡是指事件从目标元素向上传播到根元素。
-
事件捕获是指事件从根元素向下传播到目标元素。
-
默认情况下，事件处理程序在目标和冒泡阶段被调用。
-
可以通过传递第三个参数来设置捕获阶段的处理程序。
-
使用event.stopPropagation()可以阻止事件进一步传播。
-
事件流包括捕获阶段、目标阶段和冒泡阶段。
-
在捕获阶段，事件从根元素流向目标元素。
-
在冒泡阶段，事件从目标元素流向根元素。
-
事件.stopPropagation()在捕获阶段和冒泡阶段都可以阻止事件流动。
-
事件捕获相较于冒泡使用较少，冒泡有更多的应用场景，如事件委托。
延伸解读
事件传播机制的理解
事件传播机制包括冒泡和捕获两个阶段。冒泡是从目标元素向上传播，而捕获则是从根元素向下传播。理解这两者的区别对于处理复杂的事件监听至关重要，尤其是在多层嵌套的DOM结构中。
使用event.stopPropagation()的注意事项
调用event.stopPropagation()可以阻止事件的进一步传播，但在复杂的DOM树中，这可能导致意想不到的问题。开发者应谨慎使用，确保不会影响到其他依赖于事件传播的功能。
事件捕获的应用场景
虽然事件捕获相较于冒泡使用较少，但在某些特定场景下，如需要优先处理某些事件时，捕获阶段的使用可以提高性能和控制力。了解何时使用捕获可以帮助开发者优化事件处理。
延伸问答
事件冒泡和事件捕获有什么区别？
事件冒泡是事件从目标元素向上传播到根元素，而事件捕获是从根元素向下传播到目标元素。
如何在事件捕获阶段设置事件处理程序？
可以通过在addEventListener函数中传递true作为第三个参数来设置捕获阶段的处理程序。
event.stopPropagation()的作用是什么？
event.stopPropagation()可以阻止事件进一步传播，避免触发父元素的事件处理程序。
事件流的三个阶段是什么？
事件流包括捕获阶段、目标阶段和冒泡阶段。
事件冒泡有哪些常见应用场景？
事件冒泡常用于事件委托等性能优化模式。
事件捕获相比于冒泡使用得多吗？
事件捕获相较于冒泡使用较少，冒泡有更多的应用场景。
