在外部检查事件目标 jQuery - JavaScript

在使用 JavaScript 和 jQuery 时，经常需要检查事件目标以确定特定元素是否被单击，拖动等等。当你需要在元素自身的事件处理程序外部进行某些处理时，这通常是很有用的。

以下是如何在外部检查事件目标的一些方法：

使用 jQuery 的事件委托

事件委托是一种技术，其中事件处理程序不直接附加到元素，而是附加到其祖先元素，并在事件冒泡过程中检查目标元素以确定是否应该触发处理程序。

以下是使用 jQuery 实现事件委托的示例：

// 等价于 document.addEventListener('click', function(event) {...})
$(document).on('click', function(event) {
  // event.target 包含被单击的元素
});

使用原生 JavaScript 的事件委托

可以使用原生 JavaScript 在不使用 jQuery 的情况下实现事件委托：

// 等价于 document.addEventListener('click', function(event) {...})
document.body.addEventListener('click', function(event) {
  // event.target 包含被单击的元素
});

使用事件捕获

与事件委托类似，事件捕获是一种技术，其中事件处理程序被附加到元素的祖先元素，并且在事件向下传播到目标元素之前就会触发。这样，您可以检查父级元素是否被点击，然后再检查子级元素是否被点击。

以下是使用原生 JavaScript 实现事件捕获的示例：

// 等价于 document.addEventListener('click', function(event) {...}, true)
document.body.addEventListener('click', function(event) {
  // event.target 包含被单击的元素
}, true);

使用事件对象

当事件处理程序被调用时，事件对象将作为其第一个参数传递。可以使用事件对象来检查目标元素以及其他属性（如鼠标坐标和按键状态）。

以下是使用事件对象检查目标元素的示例：

document.body.addEventListener('click', function(event) {
  // event.target 包含被单击的元素
});

总之，以上是一些常见的方式。选择哪种方法取决于您的特定需求和代码环境。