复习 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()前应加条件判断，以避免影响其他默认行为。
➡️
