返回

在Javascript中DOM事件及事件委托解析

前端

DOM的概念

DOM（Document Object Model）即文档对象模型，它是网页内容及其结构的一个可编程的对象表示。DOM允许您访问HTML元素并对其进行操作。当您在网页上执行操作时，如单击按钮或输入文本，DOM事件就会触发。

事件是什么？

事件是发生在HTML元素上的一个特定行为。当一个事件发生时，浏览器会向该元素派发一个事件对象。事件对象包含有关事件的信息，如事件类型、目标元素和时间戳。

事件委托是指将事件处理程序附加到父元素，而不是单个子元素。这意味着当一个子元素触发一个事件时，该事件将自动冒泡到其父元素，直到到达附加了事件处理程序的父元素。这允许您使用单个事件处理程序来处理多个子元素的事件。

在Javascript中使用DOM事件和事件委托

在Javascript中，您可以使用addEventListener()方法来将事件处理程序附加到元素。该方法接受两个参数：事件类型和事件处理程序。例如，以下代码将一个单击事件处理程序附加到一个按钮：

const button = document.querySelector('button');

button.addEventListener('click', (event) => {
  console.log('Button clicked!');
});

当用户单击按钮时，控制台将输出“Button clicked!”。

您可以使用事件委托来处理多个元素的事件。例如，以下代码将一个单击事件处理程序附加到父元素，而不是单个子元素：

const parent = document.querySelector('.parent');

parent.addEventListener('click', (event) => {
  if (event.target.classList.contains('child')) {
    console.log('Child clicked!');
  }
});

当用户单击父元素或其任何子元素时，控制台将输出“Child clicked!”。

结论

DOM事件和事件委托是Javascript中非常强大的工具。它们允许您创建交互式和用户友好的应用程序。如果您想学习更多关于这些概念的信息，请查看MDN Web Docs上的文档。

以下是一些额外的资源，您可能会发现它们很有用：