JavaScript事件监听器如何工作

JavaScript 事件监听器是用于在特定事件发生时执行特定代码的一种机制

1. 选择目标元素：首先，你需要选择一个要添加事件监听器的 HTML 元素。你可以使用 document.querySelector()、document.getElementById() 等方法来选择目标元素。

const targetElement = document.querySelector('.my-button');

2. 创建事件处理函数：接下来，你需要创建一个 JavaScript 函数，该函数将在事件发生时执行。这个函数可以接收一些参数，如事件对象（通常表示为 event 或 e），它包含了有关事件的详细信息，如事件类型、目标元素等。

function handleClick(event) {
  console.log('Button clicked:', event.target);
}

3. 添加事件监听器：现在你可以将事件处理函数添加到目标元素上，以便在特定事件发生时执行该函数。你可以使用 addEventListener() 方法来实现这一点。这个方法接收两个参数：事件类型（如 ‘click’）和事件处理函数。

targetElement.addEventListener('click', handleClick);

4. 移除事件监听器（可选）：如果你想在某个时刻停止执行事件处理函数，可以使用 removeEventListener() 方法来移除事件监听器。这个方法同样需要两个参数：事件类型和事件处理函数。

targetElement.removeEventListener('click', handleClick);

总结一下，JavaScript 事件监听器的工作原理如下：

1. 选择目标元素。
2. 创建事件处理函数。
3. 使用 addEventListener() 将事件处理函数添加到目标元素上。
4. （可选）使用 removeEventListener() 移除事件监听器。

当特定事件（如点击）发生时，事件处理函数将被执行。