HTML | DOM MouseEvent 相关的 Target 属性

在事件处理程序中，将 event 作为参数传递给函数可以获取关于触发事件的详细信息。 event 对象有一个 target 属性，它返回触发事件的元素。

语法

event.target

解释

当事件被触发时，DOM 将该事件传递给目标元素，该元素是注册该事件的元素。 target 属性返回这个目标元素。

实例

<div id="myDiv"></div>

const myDiv = document.getElementById('myDiv');
myDiv.addEventListener('click', function(event) {
  console.log(event.target); // 输出 <div id="myDiv"></div>
});

以上代码创建了一个 div 元素，并添加了一个 click 事件监听器。当 div 被单击时，event.target 返回的是 div 元素本身。

注意事项

当事件处理程序在嵌套元素被触发的时候被调用时，event.target 返回的是最内层被触发的元素。如果你希望获取注册事件的元素，而不是真正触发事件的元素，可以使用 currentTarget 属性。

结论

target 属性用于获取触发事件的元素。当事件被传递到嵌套元素中时，可以使用 currentTarget 属性来获取注册事件的元素。