当前位置：首页 > 前端开发 > 正文

HTML如何获取事件源

在HTML中获取事件源主要通过事件对象的target属性实现，当事件触发时，浏览器会创建event对象，通过event. target即可访问最初触发事件的DOM元素，例如在点击事件中，event.target指向被点击的具体元素，无论事件是否冒泡。

标准方法：event.target 属性

当事件触发时，浏览器会创建event对象，其target属性指向实际触发事件的元素（最内层元素）。

<button id="myButton">点击</button>
<script>
  document.getElementById("myButton").addEventListener("click", function(event) {
    console.log("事件源：", event.target); // 输出：<button id="myButton">点击</button>
  });
</script>

this 关键字（注意作用域）

在通过addEventListener绑定的事件处理函数中，this指向绑定事件的元素（非箭头函数时）：

HTML如何获取事件源 第1张

<div id="parent">
  <button>子按钮</button>
</div>
<script>
  document.getElementById("parent").addEventListener("click", function(event) {
    console.log("绑定事件的元素：", this); // 输出：<div id="parent">...</div>
    console.log("实际触发源：", event.target); // 输出：<button>子按钮</button>
  });
</script>

注意：箭头函数中的this指向外层作用域，需改用event.currentTarget。

event.currentTarget 属性

始终指向绑定事件处理程序的元素，与this行为一致（推荐替代this）：

HTML如何获取事件源 第2张

element.addEventListener("click", (event) => {
  console.log(event.currentTarget); // 箭头函数中安全获取绑定元素
});

兼容旧版IE的写法

旧版IE（≤IE8）使用srcElement代替target,兼容写法：

function handleClick(event) {
  const source = event.target || event.srcElement;
  console.log("事件源：", source);
}

事件委托中的事件源

事件委托时，通过event.target精准定位触发子元素：

<ul id="list">
  <li>项目1</li>
  <li>项目2</li>
</ul>
<script>
  document.getElementById("list").addEventListener("click", (event) => {
    if (event.target.tagName === "LI") {
      alert("点击了：" + event.target.textContent);
    }
  });
</script>
属性/关键字 指向目标 适用场景
event.target 实际触发事件的元素（最内层） 精准定位事件源
event.currentTarget 绑定事件处理程序的元素 替代this，避免箭头函数问题
this 绑定事件的元素（非箭头函数） 传统函数作用域
event.srcElement target的IE兼容写法 兼容旧浏览器

最佳实践建议

  1. 首选event.target：精确获取触发源，尤其在事件委托中
  2. 用currentTarget替代this：避免箭头函数作用域问题
  3. 事件委托优化性能：减少事件绑定数量，动态元素无需重新绑定
  4. 兼容性处理：对老旧项目使用target || srcElement

引用说明：本文内容参考MDN Web文档（Event.target、Event.currentTarget）及W3C DOM事件标准。

HTML如何获取事件源 第3张

target
0

相关文章