如何在JS中获取绑定事件监听器的HTML元素而非点击子元素？

你遇到的问题源于事件冒泡机制：点击子元素时，事件会向上冒泡到绑定了监听器的父元素，但event.target始终指向实际被点击的子元素。要获取绑定事件监听器的目标元素，有两种可靠方案：

方法一：使用event.currentTarget #

event.currentTarget在事件处理过程中，始终指向绑定当前事件监听器的元素，不受冒泡影响，无论点击的是元素本身还是其子元素。修改代码如下：

function myFunction(event) {
    // 用currentTarget替代target，精准指向绑定事件的元素
    if (event.currentTarget === something) {
        console.log('test')
    }
}

something.addEventListener('click', myFunction)
somethingelse.addEventListener('click', myFunction)

方法二：使用this（注意局限性） #

普通函数作为事件处理函数时，this默认指向绑定事件的元素，效果和event.currentTarget一致：

function myFunction(event) {
    if (this === something) {
        console.log('test')
    }
}

something.addEventListener('click', myFunction)
somethingelse.addEventListener('click', myFunction)

⚠️ 注意：如果事件处理函数是箭头函数，this不会指向绑定事件的元素（箭头函数没有自身的this，会继承外部作用域的this），这种情况优先用event.currentTarget更稳妥。

内容的提问来源于stack exchange，提问作者extoplasm