DOM事件机制与事件委托——深入浅出，轻松理解事件流转

前端

2023-12-04 01:49:15

DOM事件机制与事件委托：打造交互式网页的基石

DOM事件机制

DOM事件机制是网页与用户互动交互的基础，它允许网页上的元素（如按钮、链接、表单等）对用户的操作做出响应。当用户执行诸如点击、移动鼠标、输入文本等操作时，浏览器便会触发相应的事件。

事件类型

DOM事件有各种类型，每种类型代表着不同的用户操作，常见的事件类型包括：

点击事件（click） ：鼠标单击元素
双击事件（dblclick） ：鼠标双击元素
鼠标按下事件（mousedown） ：鼠标按下元素
鼠标释放事件（mouseup） ：鼠标释放元素
鼠标移动事件（mousemove） ：鼠标在元素上移动
键盘按下事件（keydown） ：键盘按下某个键
键盘释放事件（keyup） ：键盘释放某个键
获得焦点事件（focus） ：元素获得焦点
失去焦点事件（blur） ：元素失去焦点

事件流

事件发生时，它会沿着DOM树从触发元素开始向上冒泡，直到到达文档根元素。在冒泡过程中，每个元素都有机会处理该事件，这种事件流被称为冒泡事件流。

事件处理程序

要让元素对事件做出响应，需要为元素添加事件处理程序，事件处理程序是一个函数，当该类型的事件发生时，该函数就会被调用。在HTML中，可以使用onclick、onmousemove等属性来为元素添加事件处理程序。

事件委托

事件委托是一种优化事件处理的技术，它允许将事件处理程序添加到父元素，而不是为每个子元素添加单独的事件处理程序。当子元素发生事件时，事件会沿着DOM树向上冒泡，直到到达父元素，然后父元素的事件处理程序就会被调用。

事件委托的优点

事件委托具有以下优点：

减少事件处理程序的数量 ，提高代码的可维护性
提高性能 ，因为事件处理程序只会被调用一次，而不是为每个子元素调用多次
简化事件处理逻辑 ，因为事件处理程序只需要关注父元素的事件，而不用关心子元素的事件

事件委托的实现

在HTML中，可以使用addEventListener()方法为父元素添加事件处理程序，addEventListener()方法的第一个参数是事件类型，第二个参数是事件处理程序函数。

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
  const parentElement = document.getElementById('parent');
  parentElement.addEventListener('click', (event) => {
    // 检查事件的目标元素是否为子元素
    if (event.target.id === 'child') {
      // 如果是子元素，则执行事件处理程序的逻辑
      console.log('Button clicked!');
    }
  });
</script>