如何在 JS 中定位事件对象的子元素

在开发 Web 应用程序时，经常需要在 JavaScript 中定位事件对象的子元素，以便对其进行操作。以下是几种常见的方法。

1. 通过事件对象的 target 属性定位子元素

每个事件对象都具有一个 target 属性，该属性引用了事件的目标元素。可以通过该属性来定位事件对象的子元素。

document.addEventListener('click', function(event) {
  var target = event.target;
  var subElement = target.querySelector('.sub-element');
  // 对 subElement 进行操作
});

在上面的示例中，我们在 click 事件上注册了一个事件处理程序，并使用 event.target 属性定位了事件的目标元素，然后使用 querySelector 方法定位了一个类为 sub-element 的子元素。

2. 通过事件委托定位子元素

事件委托是一种处理事件的常用技术，可以使用事件委托来定位事件对象的子元素。

var container = document.querySelector('.container');

container.addEventListener('click', function(event) {
  var subElement = event.target.closest('.sub-element');
  if (subElement) {
    // 对 subElement 进行操作
  }
});

在上面的示例中，我们在 .container 元素上注册了 click 事件处理程序，并使用 event.target.closest 方法定位了最近的包含 .sub-element 类的祖先元素。如果找到了该元素，则说明目标元素是事件对象的子元素。

3. 通过事件对象的 path 属性定位子元素

一些浏览器支持事件对象的 path 属性，该属性包含事件的传播路径，其中包括事件对象的所有祖先元素和目标元素。

document.addEventListener('click', function(event) {
  var path = event.path || (event.composedPath && event.composedPath());
  var subElement = path.find(function(element) {
    return element.classList && element.classList.contains('sub-element');
  });
  // 对 subElement 进行操作
});

在上面的示例中，我们在 click 事件上注册了一个事件处理程序，并使用 event.path 属性（如果支持）或 event.composedPath 方法获取事件的传播路径，然后使用 Array.prototype.find 方法定位了一个类为 sub-element 的祖先元素。

以上是在 JavaScript 中定位事件对象的子元素的几种常见方法。请注意，不是所有浏览器都支持所有这些方法。选择一个适合您的应用程序的方法，并测试它在您的目标浏览器上的兼容性。