如何在所有类上应用事件 - JavaScript

在 JavaScript 中，我们可以使用事件来监听用户在页面中的行为，例如鼠标单击、鼠标移动等等。但是如果要在所有类上应用事件，需要更加便捷的方法。

1. 使用事件委托

事件委托是一种有效的方式，它可以将事件绑定到父元素，而不是将事件绑定到所有的子元素。这样可以避免为每个子元素分别绑定事件，节省代码量。

// 绑定事件到父元素
document.addEventListener('click', function(event) {
  // 判断是否点击在需要监听的类上
  if (event.target.classList.contains('my-class')) {
    // 相应的处理逻辑
  }
});

2. 使用jQuery来绑定事件

jQuery 提供了 on() 方法，它可以将事件绑定到所有的类上。在事件处理函数中，可以使用 $(this) 获取当前的元素。

// 绑定事件到所有的类
$(document).on('click', '.my-class', function() {
  // 相应的处理逻辑，this 指定当前的元素
});

3. 使用 Prototype 来扩展类

我们可以使用 Element.prototype 来扩展类的原型，以便在所有的实例上都可以使用相同的事件处理逻辑。

// 扩展类的原型
Element.prototype.myFunction = function() {
  // 相应的处理逻辑
};

// 在所有的实例上使用相同的事件处理逻辑
document.addEventListener('click', function(event) {
  // 判断是否点击在需要监听的类上，如果是，则调用函数
  if (event.target.classList.contains('my-class')) {
    event.target.myFunction();
  }
});

以上介绍了在所有类上应用事件的三种方法，选择一种适合自己的即可。