addEventListener 和 currentTarget 都是 JavaScript 中用于处理事件的属性和方法。它们之间的区别如下:
下面是一个示例代码,演示了如何使用 addEventListener 方法和 currentTarget 属性来处理事件:
HTML 代码:
JavaScript 代码:
// 获取按钮元素
var button = document.getElementById('myButton');
// 添加 click 事件监听器
button.addEventListener('click', function(event) {
// 输出当前正在处理事件的元素
console.log(event.currentTarget); // 输出
// 输出触发事件的元素
console.log(event.target); // 输出
});
在上面的代码中,通过 addEventListener 方法给按钮元素添加了一个 click 事件监听器。当按钮被点击时,触发了事件处理函数,并且可以通过 currentTarget 属性获取当前正在处理事件的元素,通过 target 属性获取触发事件的元素。
注意:currentTarget 和 target 属性的值在大多数情况下是相同的,但在事件冒泡过程中可能会有所不同。如果事件处理函数绑定在父元素上,并且事件发生在子元素上并冒泡到父元素时,currentTarget 的值将是父元素,而 target 的值将是子元素。