如何通过JavaScript的onclick()函数获取目标元素？

你的问题出在onclick绑定函数时传递的参数错误：你传的this是触发事件的DOM元素本身，不是事件对象，所以函数里的e是元素，自然没有event.target对应的target属性。

下面两种方法可以直接用onclick属性实现需求：

方法1：直接传递全局event对象 #

把HTML中的onclick="check(this)"改成onclick="check(event)"，这样函数接收的e就是标准的事件对象，就能正常获取e.target：

修改后的HTML代码：

<div class="target-div">
    <div class="first-div" onclick="check(event)">
        hello everybody
    </div>
</div>
<div class="target-div">
    <div class="second_div" onclick="check(event)">
        hello everybody
    </div>
</div>

JS代码保持不变即可，此时console.log(e.target)会正确输出触发事件的目标元素。

方法2：同时传递事件对象和元素 #

如果需要同时拿到绑定事件的元素（原this）和事件对象，可以传递两个参数：

HTML代码：

<div class="target-div">
    <div class="first-div" onclick="check(event, this)">
        hello everybody
    </div>
</div>
<div class="target-div">
    <div class="second_div" onclick="check(event, this)">
        hello everybody
    </div>
</div>

JS代码修改为：

function check(e, elem){
  let targetElem = e.target  
  console.log({targetElem, bindElem: elem}) // targetElem是事件目标，elem是绑定onclick的元素
}

注意：全局event对象在严格模式下可能无法访问，所以推荐通过参数传递的方式获取事件对象，避免依赖全局变量。

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