onclick事件处理函数内this、event为undefined及currentTarget为null问题

内联onclick的底层执行逻辑 #

写在HTML元素onclick属性中的代码片段，不会直接作为事件处理函数执行。浏览器会自动将属性内的代码包裹在一个匿名事件函数中绑定到元素上，这个自动生成的匿名函数有两个固定特性：

• 形参列表包含名为event的参数，值为当前触发的DOM事件对象
• 函数内部的this指向绑定事件的当前DOM元素

以最初的写法<div onclick="myfunc()">为例，浏览器实际生成的绑定逻辑等价于：

div.onclick = function(event) {
  // 此作用域内this指向div，event为当前事件对象
  myfunc() // 属性中书写的代码将在该位置执行
}

各异常场景的根因 #

• 初始写法参数e为undefined、this为undefined
  内联代码中myfunc()属于无参独立调用：既没有将匿名函数作用域内的event传入myfunc，导致形参e无值；同时严格模式下（ES模块、现代前端项目默认开启严格模式），普通函数被独立调用时内部this固定为undefined，非严格模式下this会指向window，均不会指向绑定事件的div。
• 改为myfunc(event)后能拿到事件对象，但currentTarget为null、this仍为undefined
  能获取事件对象是因为显式将匿名函数作用域内的event作为参数传入了myfunc；this仍为undefined是因为调用myfunc时没有手动绑定this指向，依然是独立调用模式，严格模式下this保持为undefined。
  至于event.currentTarget值为null，属于DOM事件标准行为：当事件完整走完捕获、目标、冒泡的全传播流程后，浏览器会主动将事件实例上的currentTarget属性重置为null。控制台打印事件对象后，用户手动展开属性查看时事件流程早已结束，因此看到的值为null，不属于代码逻辑错误。

正确实现方式 #

如果需要自定义函数内同时拿到正确的事件对象、且this指向绑定事件的DOM元素，调用时通过call手动绑定this即可：

<div onclick="myfunc.call(this, event)">

对应事件处理函数无需特殊调整：

function myfunc(e) {
  console.log(this) // 正确输出绑定事件的div元素
  console.log(e.currentTarget) // 事件执行流程内访问，正确输出div元素
}

如果不需要修改函数内的this指向，也可以将当前元素作为普通参数传入：

<div onclick="myfunc(event, this)">

function myfunc(e, currentEl) {
  console.log(currentEl) // 直接获取绑定事件的div元素
}

常见认知误区：资料中提到的「内联事件处理函数内this指向元素」，描述的是onclick属性内代码本身所在的匿名函数上下文，比如直接写onclick="console.log(this)"确实会输出当前元素。但在该上下文中调用外部自定义函数时，外部函数的this遵循JS函数本身的this绑定规则，不会自动继承外层匿名函数的this指向。

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