HTML | DOM 安装事件

在 JavaScript 中，我们可以通过给 HTML 元素添加事件监听器来响应用户的交互行为。但是，为了能够添加事件监听器，我们需要先获取目标元素的引用，这通常通过 DOM (文档对象模型) 来实现。

DOM 事件

DOM 事件是指 HTML 文档中发生的各种事件，例如点击、鼠标移动、键盘按键、窗口大小改变等等。当一个事件发生时，我们可以为其创建一个事件处理程序，也就是所谓的事件监听器。

以下是一些常用的 DOM 事件：

• click：鼠标点击事件
• mouseover：鼠标移入事件
• mouseout：鼠标移出事件
• keydown：键盘按键事件
• load：HTML 页面加载事件
• unload：HTML 页面卸载事件
• resize：浏览器窗口大小改变事件

安装事件

要安装一个事件监听器，可以使用以下两种方式：

HTML 属性

我们可以使用 HTML 元素的属性来添加事件监听器。以下是一个例子：

<button onclick="myFunction()">点击我</button>

上面的代码会在用户点击 button 元素时调用 myFunction() 函数。但是，使用 HTML 属性添加事件监听器的缺点在于它与 HTML 内容混合在一起，不利于代码的维护和管理。

addEventListener() 方法

更好的方式是使用 JavaScript 的 addEventListener() 方法。这个方法可以给任意一个 DOM 元素添加事件监听器，而且可以添加多个事件监听器。

以下是一个例子：

document.querySelector('#myButton').addEventListener('click', function() {
  alert('你点击了我！');
});

上面的代码会在用户点击 ID 为 myButton 的按钮时弹出一个警告框。

移除事件

我们可以使用 removeEventListener() 方法来移除事件监听器。这个方法需要传入两个参数：要移除的事件类型和要移除的事件处理程序。

以下是一个例子：

function myFunction() {
  alert('你点击了我！');
  document.querySelector('#myButton').removeEventListener('click', myFunction);
}

document.querySelector('#myButton').addEventListener('click', myFunction);

上面的代码中，myFunction() 函数会在用户点击 myButton 按钮时被调用，同时还会移除自身。这意味着按钮只能被点击一次。

结论

DOM 事件是 JavaScript 中非常重要的一部分，它允许我们响应用户的交互行为，并使我们的 Web 应用程序变得更加灵活和交互式。安装事件监听器的两种方式都有各自的优势和不足，我们需要根据具体情况选择合适的方式来使用。