DOM EventListener

在 Web 开发中，DOM 事件监听器（EventListener）是非常重要的概念。通过事件监听器，我们可以在特定的 DOM 元素上监听各种事件，并在事件发生时执行相应的操作。

添加事件监听器

要在 DOM 元素上添加事件监听器，我们可以使用 addEventListener 方法。语法如下：

element.addEventListener(event, function, useCapture);

• event：表示要监听的事件名称，比如 click、mouseover 等。
• function：表示事件触发时执行的函数。
• useCapture：一个可选的布尔值参数，指定事件是在捕获阶段还是冒泡阶段处理。默认为 false，表示在冒泡阶段处理。

示例代码：

// 获取一个按钮元素
const button = document.getElementById('myButton');

// 添加 click 事件监听器
button.addEventListener('click', function() {
  alert('Button clicked!');
});

事件对象

在事件监听器的回调函数中，可以通过参数来获取事件对象。事件对象包含了关于事件的各种信息，比如触发事件的元素、事件类型等。

示例代码：

// 获取一个输入框元素
const input = document.getElementById('myInput');

// 添加 input 事件监听器
input.addEventListener('input', function(event) {
  console.log('Input value changed:', event.target.value);
});

移除事件监听器

如果我们想要移除已经添加的事件监听器，可以使用 removeEventListener 方法。语法如下：

element.removeEventListener(event, function, useCapture);

示例代码：

// 移除之前添加的 click 事件监听器
button.removeEventListener('click', clickHandler);

通过学习 DOM EventListener，我们可以更好地处理用户交互、页面操作等各种事件，使我们的 Web 应用更加灵活和交互性。