DEV Community
·
事件流：冒泡与捕获
💡
原文英文，约800词，阅读约需3分钟。
📝
内容提要
事件传播机制包括事件冒泡和事件捕获。事件冒泡是指事件从目标元素向上传播到根元素，而事件捕获则是从根元素向下传播到目标元素。默认情况下，事件处理程序在目标和冒泡阶段被调用，第三个参数可用于在捕获阶段设置处理程序。使用event.stopPropagation()可以阻止事件进一步传播。
🎯
关键要点
- 事件传播机制包括事件冒泡和事件捕获。
- 事件冒泡是指事件从目标元素向上传播到根元素。
- 事件捕获是指事件从根元素向下传播到目标元素。
- 默认情况下，事件处理程序在目标和冒泡阶段被调用。
- 可以通过传递第三个参数来设置捕获阶段的处理程序。
- 使用event.stopPropagation()可以阻止事件进一步传播。
- 事件流包括捕获阶段、目标阶段和冒泡阶段。
- 在捕获阶段，事件从根元素流向目标元素。
- 在冒泡阶段，事件从目标元素流向根元素。
- 事件.stopPropagation()在捕获阶段和冒泡阶段都可以阻止事件流动。
- 事件捕获相较于冒泡使用较少，冒泡有更多的应用场景，如事件委托。
❓
延伸问答
事件冒泡和事件捕获有什么区别？
事件冒泡是事件从目标元素向上传播到根元素，而事件捕获是从根元素向下传播到目标元素。
如何在事件捕获阶段设置事件处理程序？
可以通过在addEventListener函数中传递true作为第三个参数来设置捕获阶段的处理程序。
event.stopPropagation()的作用是什么？
event.stopPropagation()可以阻止事件进一步传播，避免触发父元素的事件处理程序。
事件流的三个阶段是什么？
事件流包括捕获阶段、目标阶段和冒泡阶段。
事件冒泡有哪些常见应用场景？
事件冒泡常用于事件委托等性能优化模式。
事件捕获相比于冒泡使用得多吗？
事件捕获相较于冒泡使用较少，冒泡有更多的应用场景。
🏷️
标签
➡️
