js实现target

实现事件委托中的 event.target

在 JavaScript 中，event.target 用于获取触发事件的原始元素。以下是几种常见的使用场景和方法：

基本用法

document.addEventListener('click', function(event) {
  console.log(event.target); // 输出被点击的具体元素
});

事件委托示例 通过父元素监听子元素事件，利用 event.target 判断触发源：

document.getElementById('parent').addEventListener('click', function(event) {
  if (event.target.classList.contains('child')) {
    console.log('子元素被点击');
  }
});

与 currentTarget 的区别

• event.target：始终指向触发事件的原始元素
• event.currentTarget：指向当前正在处理事件的元素（绑定监听器的元素）

兼容性处理 对于老版本 IE 浏览器（IE8及以下），需使用 event.srcElement 替代：

var target = event.target || event.srcElement;

动态元素事件绑定 对于动态生成的元素，事件委托是推荐方案：

document.body.addEventListener('click', function(event) {
  if (event.target.matches('.dynamic-element')) {
    // 处理动态元素点击
  }
});

注意事项

• 事件冒泡阶段才能正常获取 target
• SVG 元素在某些浏览器中可能需要特殊处理
• 嵌套元素时需注意事件穿透问题