UsubeniFantasy
·
复习 DOM 事件机制
💡
原文中文，约4900字，阅读约需12分钟。
📝
内容提要
本期主题为DOM事件机制，包括捕获、目标和冒泡三个阶段。通过addEventListener注册事件，使用stopPropagation阻止事件传播，preventDefault阻止默认行为。事件委托可提高性能，区分target和currentTarget至关重要。建议对滚动事件使用passive: true以优化性能。
🎯
关键要点
- DOM事件机制包括捕获、目标和冒泡三个阶段。
- 事件传播分为捕获阶段、目标阶段和冒泡阶段。
- 使用addEventListener注册事件时，第三个参数决定事件的捕获或冒泡阶段。
- event.stopPropagation()可以阻止事件传播，event.preventDefault()可以阻止默认行为。
- 事件委托可以提高性能，通过冒泡机制只需为父元素绑定一次事件监听器。
- passive: true选项可以优化滚动事件性能，告知浏览器不会调用preventDefault()。
- 区分event.target和event.currentTarget非常重要，前者是触发事件的元素，后者是绑定监听器的元素。
- 阻止传播和阻止默认行为是两种不同的操作，互不影响。
- 在调用preventDefault()前应加条件判断，以避免影响其他默认行为。
❓
延伸问答
DOM事件机制的三个阶段是什么？
DOM事件机制包括捕获阶段、目标阶段和冒泡阶段。
如何使用addEventListener注册事件？
使用addEventListener(type, listener, useCapture)注册事件，第三个参数决定事件的捕获或冒泡阶段。
event.stopPropagation()和event.preventDefault()有什么区别？
event.stopPropagation()阻止事件传播，而event.preventDefault()阻止浏览器执行默认行为，两者互不影响。
什么是事件委托，它有什么好处？
事件委托是利用冒泡机制为父元素绑定一次事件监听器，从而提高性能，减少内存消耗。
如何优化滚动事件的性能？
对滚动事件使用passive: true选项，告知浏览器不会调用preventDefault()，从而优化性能。
如何区分event.target和event.currentTarget？
event.target是触发事件的元素，而event.currentTarget是绑定监听器的元素，二者在复杂组件中非常重要。
➡️
