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

HTML如何获取事件源

admin
前端开发
2025-06-21
3103

在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）：

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兼容写法	兼容旧浏览器