当前位置：首页 > JavaScript

js实现target

2026-02-02 08:03:50JavaScript

实现事件委托中的 target

在 JavaScript 中，event.target 用于获取触发事件的元素。事件委托是一种常见的技术，通过将事件监听器添加到父元素而不是每个子元素来提高性能。

document.getElementById('parent').addEventListener('click', function(event) {
  console.log('Clicked element:', event.target);
});

实现自定义目标元素查找

如果需要查找特定选择器匹配的目标元素，可以使用 closest() 方法向上遍历 DOM 树：

js实现target

document.addEventListener('click', function(event) {
  const targetButton = event.target.closest('.btn');
  if (targetButton) {
    console.log('Button clicked:', targetButton);
  }
});

实现动态内容的目标处理

对于动态添加的元素，事件委托特别有用：

js实现target

document.body.addEventListener('click', function(event) {
  if (event.target.classList.contains('dynamic-item')) {
    console.log('Dynamic item clicked:', event.target);
  }
});

实现精确的目标匹配

有时需要区分目标元素和它的子元素：

document.querySelector('.container').addEventListener('click', function(event) {
  if (event.target === this) {
    console.log('Container itself was clicked');
  } else {
    console.log('Child element was clicked:', event.target);
  }
});

实现多级目标判断

对于复杂嵌套结构，可以结合 matches() 方法进行判断：

document.addEventListener('click', function(event) {
  if (event.target.matches('.menu > li')) {
    console.log('Top-level menu item clicked');
  } else if (event.target.matches('.menu li ul li')) {
    console.log('Submenu item clicked');
  }
});

这些方法提供了灵活的方式来处理不同场景下的目标元素获取和判断，适用于静态和动态内容。