Question

我知道使用inline javascript实际上是一种不好的做法。

但仅仅是为了试验我试图做一些像：

<body onclick="this.style.background='#ff0000';">
     Hello
</body>

它正在工作..

但问题出现时

我这样做：

<body onload="this.style.background='#ff0000';">
     Hello
</body>

它引发错误：Uncaught TypeError: Cannot set property 'background' of undefined

但是

<body onload="document.body.style.background='#ff0000';">
     Hello
</body>

工作正常。

任何人都可以帮助我理解，为什么会这样？

是因为body onload内部转换为window.onload吗？（那样window.style变得未定义？）

还是别的？

任何帮助，建议表示赞赏。

Answer 1

当事件是用户启动的时，如在onclick中，一旦用户点击就会触发，意味着用户正在直接进行交互，this将引用事件所在的元素在这种情况下，绑定body

对于onload，它不是用户启动的事件，因此this引用window对象。

Answer 2

正如您所提到的，当您尝试onload时，this会引用窗口对象。

<body onload="this.style.background='#ff0000';">
     Hello
</body>

你可以尝试使用：

<body onload="console.log(this instanceof Window)">