事件绑定之小测试 onclick && addEventListener

2023年6月11日上午3:37 • JavaScript

事件绑定是 Web 开发中常用的技术。在 JavaScript 中，有多种方法可以实现事件绑定，其中包括 onclick 和 addEventListener。本文将介绍 onclick 和 addEventListener 的使用方法以及他们之间的区别，同时提供了两个示例，以帮助读者更好地理解事件绑定。

onclick

onclick 是 JavaScript 原生事件绑定方法之一，它可以在 HTML 元素上直接设置事件处理程序，例如：

<button id="myBtn" onclick="alert('Hello World!')">Click me</button>

在这个示例中，当用户点击按钮时，将会弹出一个对话框，显示 "Hello World!"。

onclick 的优点在于它的简单性和易用性，适用于一些简单的交互操作。然而，它也有一些缺点。首先，onclick 只能给一个元素绑定一个事件。其次，它不支持事件的冒泡和捕获，因此对于需要处理冒泡和捕获的事件，onclick 就显得比较局限了。

addEventListener

addEventListener 是另一种 JavaScript 原生事件绑定方法，它可以绑定多个事件处理程序，还支持事件的冒泡和捕获，例如：

<button id="myBtn">Click me</button>

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
  alert('Hello World!');
});

在这个示例中，我们通过 document.getElementById 获取按钮元素，并使用 addEventListener 方法将 click 事件绑定到按钮上。当用户点击按钮时，将会弹出一个对话框，显示 "Hello World!"。

addEventListener 还有一些其他的优点，例如可以在事件处理程序中使用 this 关键字指向事件目标，可以使用 removeEventListener 方法取消事件的绑定，等等。

总的来说，使用 addEventListener 是更灵活和强大的方式，尤其是当你需要绑定多个事件处理程序或者处理冒泡和捕获事件的时候。

示例

下面我们来看两个具体的示例来更好地理解 onclick 和 addEventListener 的使用方法。

示例 1：动态绑定事件

在这个示例中，我们创建了一个按钮并动态地给它绑定了 click 事件处理程序。

<button id="myBtn">Click me</button>

var btn = document.getElementById("myBtn");
btn.onclick = function() {
  alert('Hello World!');
};

在这个示例中，我们首先使用 document.getElementById 获取按钮元素，然后使用 onclick 属性将 click 事件绑定到按钮上，并为其设置事件处理程序。当用户点击按钮时，将会弹出一个对话框，显示 "Hello World!"。

这个示例使用了 onclick 属性来实现事件的绑定。虽然 onclick 简单易用，但是它只能绑定单个事件处理程序。因此，如果我们需要绑定多个事件处理程序，就需要使用 addEventListener 方法。

示例 2：使用 addEventListener 绑定事件

在这个示例中，我们创建了一个链接并使用 addEventListener 给它绑定了 click 事件处理程序。

<a id="myLink" href="#">Click me</a>

var link = document.getElementById("myLink");
link.addEventListener("click", function(event) {
  event.preventDefault();
  alert('Hello World!');
});

在这个示例中，我们首先使用 document.getElementById 获取链接元素，然后使用 addEventListener 方法将 click 事件绑定到链接上，并为其设置事件处理程序。在事件处理程序中，我们使用了 event.preventDefault() 方法来阻止链接的默认操作（即跳转至 href 属性中指定的 URL）。然后，我们使用 alert() 方法弹出一个对话框，显示 "Hello World!"。

这个示例使用了 addEventListener 方法来实现事件的绑定。由于 addEventListener 支持绑定多个事件处理程序、支持处理冒泡和捕获事件，并且事件处理程序可以接收 Event 对象作为参数，因此使用它能够更加灵活地处理事件。