DOM事件机制再理解
2023-10-28 17:41:37
在网页端、移动端H5、小程序等各个终端环境的前端开发中随处可见事件的运用，可见事件机制的确是前端这一块的重中之重。经过我研读大量博客文章以及开源框架源码后，这次算是对DOM事件机制有了更新更全面的认识。
下文主要通过一个例子带你分析DOM事件的传递、事件处理，然后在此基础上再深入探讨事件委托、事件冒泡、addEventListener、stopPropagation和preventDefault等概念。通过本文的学习，你将对DOM事件机制有一个更加深入的理解。
DOM事件的传递
DOM事件的传递是指当一个事件发生时，它在DOM树中从目标元素到根元素的传播过程。在这个过程中，事件会经过一系列的元素，这些元素都可以对事件做出响应。
事件传递有两种方式：事件捕获和事件冒泡。
- 事件捕获： 事件捕获是指事件从根元素开始向下传播，直到达到目标元素。在这个过程中，每个元素都可以对事件做出响应，即使这个元素不是事件的目标元素。
- 事件冒泡： 事件冒泡是指事件从目标元素开始向上传播，直到达到根元素。在这个过程中，每个元素都可以对事件做出响应，即使这个元素不是事件的目标元素。
DOM事件的处理
DOM事件的处理是指当一个事件发生时，浏览器对事件做出的响应。事件处理可以分为两个步骤：
- 事件监听： 首先，需要为元素添加一个事件监听器。事件监听器是一个函数，当事件发生时，这个函数就会被调用。
- 事件处理： 当事件发生时，事件监听器就会被调用。在事件监听器中，可以对事件进行处理，例如，可以阻止事件的传播，或者可以修改事件的目标元素。
事件委托
事件委托是一种优化事件处理的技巧。事件委托的思想是，将事件监听器添加到一个父元素上，而不是添加到每个子元素上。当一个子元素发生事件时，事件会向上冒泡到父元素，然后父元素的事件监听器就会被调用。
事件委托的好处是，它可以减少事件监听器的数量，从而提高页面的性能。
事件冒泡
事件冒泡是一种事件传递的方式。事件冒泡是指事件从目标元素开始向上传播，直到达到根元素。在这个过程中，每个元素都可以对事件做出响应，即使这个元素不是事件的目标元素。
事件冒泡的好处是，它可以使事件处理更加灵活。例如，如果在一个页面中有多个元素需要对同一个事件做出响应，那么只需要在父元素上添加一个事件监听器就可以了。
addEventListener
addEventListener()方法用于向元素添加事件监听器。addEventListener()方法有两个参数：
- 事件类型： 要监听的事件类型，例如，"click"、"mouseover"、"mouseout"等。
- 事件处理函数： 当事件发生时，要调用的函数。
stopPropagation
stopPropagation()方法用于阻止事件的传播。stopPropagation()方法可以防止事件向上冒泡。
preventDefault
preventDefault()方法用于阻止事件的默认行为。preventDefault()方法可以阻止事件的默认行为，例如，阻止链接跳转、阻止表单提交等。
总结
DOM事件机制是前端开发中非常重要的一部分。通过对DOM事件机制的学习，可以使开发人员更加熟练地处理事件，从而开发出更加交互性、更加用户友好的网页。
