具有类的元素的事件侦听器 - JavaScript

在 JavaScript 中，可以使用事件侦听器（也称为事件处理程序）来执行某些操作，例如在用户单击按钮或提交表单时执行操作。通过为元素添加类，可以轻松地筛选要应用事件侦听器的元素。在本文中，我们将探讨如何使用具有类的元素的事件侦听器来改善 JavaScript 代码的可读性和无障碍性。

添加类到 HTML 元素

首先，我们需要向 HTML 元素添加类。可以使用 class 属性来添加一个或多个类。例如，如果我们有一个按钮，可以添加一个名为 my-button 的类，如下所示：

<button class="my-button">Click me</button>

我们可以使用这个类来仅添加到特定的按钮事件侦听器。类应该描述元素的用途，而不是其样式。这样有助于将 HTML 和 CSS 分离，使代码更易于维护。

使用具有类的元素的事件侦听器

为了使用具有类的元素的事件侦听器，我们需要在 JavaScript 代码中查询特定的元素。我们可以使用 document.querySelector() 方法，它返回与选择器匹配的第一个元素。例如，在上面定义的按钮上添加事件侦听器，如下所示：

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

myButton.addEventListener('click', () => {
  alert('You clicked the button!');
});

在这里，我们使用 .my-button 类选择按钮，并添加一个事件侦听器，在单击按钮时弹出警告框。请注意，我们使用箭头函数来定义函数。这比传递函数名更简洁，特别是在定义行内函数时。

应该指出的是，我们可以使用其他事件，例如 submit，mouseover 或 focus，以及事件的命名应该与传递给 addEventListener() 方法的参数相同。

总结

在本文中，我们了解了如何使用具有类的元素的事件侦听器来解决 JavaScript 代码在 HTML 和 CSS 中分离的问题。在编写更大的代码库时，代码的可读性和可维护性至关重要。当我们需要只添加特定元素的事件侦听器时，类可以使这个过程更加容易。