Question

哪些参数传递给DOM onclick处理程序？如何解析参数/ DOM onclick处理程序的执行上下文是什么？

请参阅此jsbin（使用浏览器开发控制台，因为jsbin不是很好）或下面的代码：

<!-- Remove the id="someid" and see what happpens -->
<input type="text" id="someid" onclick="clickHandler(this,event,someid)'"/>

<script>
   function clickHandler() {
      console.log(arugments);
   }
</script>

参考

MDN DOM on-event handlers

其他详细信息

我意识到不建议在DOM中附加事件。但是这种技术仍然用在遗留应用程序上，我找不到任何文档，除了将处理程序传递给'this'参数。

Answer 1

这是一个让我自己感到困惑的案例，并认为绑定在HTML属性中的处理程序以某种方式具有不同的执行上下文。

处理程序仍在全局范围/窗口对象中执行。因此，正如预期的那样，函数中的事件对象引用window.event对象，而someid对象引用window.someid。

<input type='text' id='someid' 
 onclick="
   clickHandler(this,
                event,  //window.event
                someid)" //window.someid'/>

为具有唯一ID的元素自动创建窗口对象是我不知道在问题的评论中指出的内容：

Do DOM tree elements with ids become global variables?

DOM onclick处理程序参数/执行上下文

1 个答案: