在前端开发过程中，获取事件源元素是一个非常常见的操作。通过该操作，我们可以获得用户在页面上触发的具体元素，从而实现对该元素进行进一步的操作或处理。在本文中，我们将讨论如何使用 JavaScript 获取事件源元素，并提供几个示例。
事件源元素
在浏览器中，每个 HTML 元素都可以成为一个事件的源头。当用户与页面交互时，例如点击、鼠标移动等，浏览器会自动将事件传递给相应的元素。此时，我们可以通过 JavaScript 来获取该元素对象，从而实现对该元素进行操作。
获取事件源元素的方法
event.target
在事件处理函数中，我们可以通过 event 对象来获取当前触发事件的相关信息。其中，event.target 属性表示事件源元素。例如：
document.getElementById("myElement").addEventListener("click", function(event) {
console.log(event.target); // 输出被点击的元素
});event.currentTarget
除了 event.target，event.currentTarget 也可以用来获取事件源元素。它表示触发当前事件的元素，即注册事件监听器的元素。例如：
document.getElementById("myElement").addEventListener("click", function(event) {
console.log(event.currentTarget); // 输出注册监听器的元素
});需要注意的是，event.target 和 event.currentTarget 可能不一样。例如，当用户点击某个元素内的子元素时，event.target 表示该子元素，而 event.currentTarget 表示该父元素。
this
在事件处理函数中，this 关键字也可以用来获取当前事件源元素。它与 event.currentTarget 的作用相同，表示注册监听器的元素。例如：
document.getElementById("myElement").addEventListener("click", function() {
console.log(this); // 输出注册监听器的元素
});需要注意的是，使用 this 时要避免使用箭头函数，因为箭头函数的 this 始终指向其定义时的上下文。
示例代码
下面是几个示例代码，演示如何获取事件源元素。
点击按钮
<button id="myButton">Click me</button>
<script>
document.getElementById("myButton").addEventListener("click", function(event) {
console.log(event.target);
});
</script>该示例中，我们为按钮绑定了一个 click 事件处理函数。当用户点击按钮时，控制台将输出按钮元素对象。
鼠标移动
<div id="myDiv" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
document.getElementById("myDiv").addEventListener("mousemove", function(event) {
console.log(event.target);
});
</script>该示例中，我们为一个 <div> 元素绑定了一个 mousemove 事件处理函数。当用户在该元素内移动鼠标时，控制台将输出该元素对象。
总结
本文介绍了如何使用 JavaScript 获取事件源元素。通过 event.target、event.currentTarget 和 this 等方法，我们可以轻松地获取用户触发事件的具体元素，并实现相应的操作。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30159