DOM 事件 - Javascript

在 Javascript 中，DOM 事件允许我们对特定的 HTML 元素进行监听并在特定的事件发生时执行相应的代码。

监听事件

要监听特定的事件，我们需要使用 addEventListener() 方法。该方法需要传入两个参数：要监听的事件类型和事件触发时要执行的函数。

以下是一个示例代码片段，演示如何使用 addEventListener() 方法监听元素的 click 事件。

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

button.addEventListener('click', function() {
  console.log('Button clicked');
});

请注意，使用该方法时，我们将函数作为第二个参数传递，但不要在函数名称后加括号。如果加上括号，函数将会被立即调用，而不是在事件发生时执行。

移除事件

当我们不再需要某个事件的监听器时，可以使用 removeEventListener() 方法将其移除。该方法需要传入与添加监听器时相同的参数。

以下是一个示例代码片段，演示如何使用 removeEventListener() 方法移除元素的 click 事件监听器。

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

const handleClick = function() {
  console.log('Button clicked');
};

button.addEventListener('click', handleClick);

// 5 秒后移除事件监听器
setTimeout(function() {
  button.removeEventListener('click', handleClick);
}, 5000);

常见的 DOM 事件类型

以下是一些常见的 DOM 事件类型。

• click - 鼠标点击
• mouseover - 鼠标移动到元素上方
• mouseout - 鼠标从元素上方移开
• keydown - 按下键盘上的任意键
• keyup - 松开键盘上的键
• submit - 提交表单
• load - 完成页面加载
• resize - 调整窗口大小
• scroll - 滚动页面

小结

DOM 事件提供了一种方便的方式来监听 HTML 元素的特定事件，并在事件发生时执行相应的代码。使用 addEventListener() 和 removeEventListener() 方法可以轻松地添加和移除事件监听器。在实际开发中，我们应该了解和熟悉常见的 DOM 事件类型，并根据需要适当地使用它们。