回到基础：事件

了解 JavaScript 事件：事件处理、冒泡、代理和模拟

在网页开发中，事件是用户与网页交互时触发的行为。它们可以是鼠标点击、键盘输入、页面加载甚至窗口调整大小等。为了响应这些事件，JavaScript 提供了强大的事件处理机制。

事件处理程序：内联与外联

当事件发生时，浏览器会执行称为事件处理程序的代码块。事件处理程序可以是内联的，这意味着它们直接写在 HTML 元素中，也可以是外联的，这意味着它们存储在单独的 JavaScript 文件中并通过 addEventListener() 方法附加到元素。

示例：

<!-- 内联事件处理程序 -->
<button onclick="alert('Hello world!')">点击我</button>

<!-- 外联事件处理程序 -->
<script>
  const button = document.getElementById('button');
  button.addEventListener('click', function() {
    alert('Hello world!');
  });
</script>

事件冒泡：事件传播

事件冒泡是一种机制，当事件从其源头元素开始向其父元素逐级传播时发生。例如，如果子元素触发了一个事件，则该事件将冒泡到父元素，依此类推，直到达到根元素。

事件捕获：从根到源

事件捕获与事件冒泡相反，它涉及事件从根元素传播到其子元素。要启用事件捕获，需要在 addEventListener() 方法的第三个参数中指定 true。

示例：

button.addEventListener('click', function() {
  // 捕获事件
}, true);

事件代理：优化性能

事件代理是一种性能优化技术，其中事件处理程序只附加到父元素。然后，在父元素的事件处理程序中检查事件的目标元素是否为预期的子元素。如果目标元素匹配，则触发子元素的事件处理程序。

示例：

const parent = document.getElementById('parent');
parent.addEventListener('click', function(e) {
  const target = e.target;
  if (target.classList.contains('child')) {
    // 触发子元素的事件处理程序
  }
});

模拟事件：触发事件

模拟事件允许开发人员使用 JavaScript 代码主动触发事件。这在测试目的或自动化交互时非常有用。可以使用 dispatchEvent() 方法模拟事件。

示例：

const button = document.getElementById('button');
const event = new Event('click');
button.dispatchEvent(event);

常见问题解答

1. 事件监听器和事件处理程序有什么区别？

事件监听器是附加到元素的方法，它指定当特定事件发生时要执行的事件处理程序。事件处理程序是实际执行代码的函数或代码块。

2. 为什么要使用外联事件处理程序？

外联事件处理程序有助于保持代码的可维护性和可重用性，因为它将事件处理程序逻辑与 HTML 分离。

3. 如何防止事件冒泡？

通过在事件处理程序中调用 stopPropagation() 方法可以防止事件冒泡。

4. 什么是事件委派？

事件委派是事件代理的一种变体，其中事件处理程序直接附加到文档根元素，并检查事件目标元素的祖先是否与预期的元素匹配。

5. 如何处理跨浏览器事件兼容性问题？

使用事件监听器跨浏览器一致地处理事件。例如，addEventListener() 方法在所有现代浏览器中都受支持。