“this”在“on ..”属性中的函数内部引用了什么？

Question

例如，<td id='xyz' onmouseover='doIt(this)'...之间有什么区别 和<td id='xyz' onmouseover='doIt()'...。 this是DOM元素吗？

Answer 1

浏览器调用构造的处理函数，使this引用事件所针对的DOM元素。因此，this只是对出现此类属性的DOM元素的引用。

Answer 2

在示例中，this引用处理程序绑定的DOM元素。我建议阅读the excellent articles at quirksmode.org，其中解释了这一点以及有关事件处理的更多信息。

  

<td id='xyz' onmouseover='doIt(this)'...和<td id='xyz' onmouseover='doIt()'...

之间的区别是什么？

在第一种情况下，你将一个参数传递给函数，这是一个DOM元素，在第二种情况下，你没有。

Answer 3

this将引用DOM元素，在您的示例中为td DOM元素。

请查看MDN page on event handlers以获取更多信息，特别是有关inline event handlers的部分。

Answer 4

你问“有什么区别”。不同之处在于，在第一种情况下，调用是从执行上下文进行的，其中this是对元素的引用，并且该引用作为第一个参数传递给doIt。在第二种情况下，没有传递参数。

现在为什么。

当事件到达元素时，相关的处理程序将查看是否有任何代码要运行。如果存在，它将创建一个新的执行上下文，就好像在函数代码中，其作用域链上的全局对象和this绑定设置为元素。然后它将执行代码。所以在处理程序的执行上下文中，当代码：

doIt(this)

执行

，this引用该元素。请注意，由于在this的调用中未设置doIt()，因此其this将以非严格模式默认为全局对象，或者在严格模式下保持未定义。