UsubeniFantasy
·
复习 DOM 事件机制
内容提要
本期主题为DOM事件机制，包括捕获、目标和冒泡三个阶段。通过addEventListener注册事件，使用stopPropagation阻止事件传播，preventDefault阻止默认行为。事件委托可提高性能，区分target和currentTarget至关重要。建议对滚动事件使用passive: true以优化性能。
关键要点
-
DOM事件机制包括捕获、目标和冒泡三个阶段。
-
事件传播分为捕获阶段、目标阶段和冒泡阶段。
-
使用addEventListener注册事件时，第三个参数决定事件的捕获或冒泡阶段。
-
event.stopPropagation()可以阻止事件传播，event.preventDefault()可以阻止默认行为。
-
事件委托可以提高性能，通过冒泡机制只需为父元素绑定一次事件监听器。
-
passive: true选项可以优化滚动事件性能，告知浏览器不会调用preventDefault()。
-
区分event.target和event.currentTarget非常重要，前者是触发事件的元素，后者是绑定监听器的元素。
-
阻止传播和阻止默认行为是两种不同的操作，互不影响。
-
在调用preventDefault()前应加条件判断，以避免影响其他默认行为。
延伸解读
事件传播机制的理解
DOM事件传播分为捕获、目标和冒泡三个阶段。理解这些阶段有助于开发者在事件处理时选择合适的监听方式，尤其是在复杂的组件嵌套中，合理利用冒泡机制可以减少事件监听器的数量，提高性能。
阻止事件传播与默认行为的区别
阻止事件传播和阻止默认行为是两种不同的操作。前者通过stopPropagation()阻止事件在DOM树中的传播，而后者通过preventDefault()阻止浏览器执行默认动作。开发者在使用时需明确其影响，以避免意外的行为。
事件委托的性能优势
事件委托利用冒泡机制，可以为父元素绑定一次事件监听器，从而避免为每个子元素单独绑定。这种方式在处理大量动态元素时尤为有效，能够显著提升性能，减少内存占用。
使用passive选项优化性能
在处理滚动事件时，使用passive: true选项可以告知浏览器该事件不会调用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是绑定监听器的元素，二者在复杂组件中非常重要。
