这三种侦听事件的方式之间的范围有何不同？答案

【问题标题】：How the does scope differ between these three ways of listening for events?这三种侦听事件的方式之间的范围有何不同？
【发布时间】：2014-04-11 01:23:03
【问题描述】：

假设函数doSomething()定义在同一个地方，这三种监听事件的方法在执行时函数的作用域有区别吗？

<body onload="doSomething();">
document.body.onload = doSomething;
document.body.addEventListener('load', doSomething);

与addEventListener()相比，除了属性只能包含一个“侦听器”之外，这三种方式侦听事件之间还有其他区别吗？（比如传入的参数，或者this的值？）

【问题讨论】：

好吧，在属性代码中，您显然既没有将this 值也没有将事件传递给doSomething() ...
虽然与您的问题无关，但第三个不会做任何事情。您需要绑定到'load' 事件，而不是'onload'
@enhzflep 糟糕，这是一个错字。谢谢，已修复。
@enhzflep 不过，如果 JavaScript 像 AS3 那样严格输入，就不会出现难以调试的错字。我的“修复”：twitter.com/IQAndreas/status/453754209582583808
@IQAndreas - 我个人认为这不是改进。您仍然必须记住，在使用 addEventListener 时，'on' 前缀不适用。虽然您确实受益于在一个块中拥有一堆处理程序名称，这可能有助于识别一个错误的处理程序，但对于因此运行的东西来说，这是一个非常多的输入（阅读：代码膨胀）稍微慢一点。就是说-这是一种不适合我的方法，因为我可以记住它们（或很快地查找名称）。其他人的里程显然会有所不同。

标签： javascript html javascript-events

【解决方案1】：

onload="doSomething();" 与

相似

document.body.onload = function(event) { 
    doSomething();
};

在事件处理程序本身内部，this 指的是处理程序绑定到的元素，但在doSomething、this 内部将指的是window、since you are calling the function "normally"。 doSomething 也无权访问事件对象。如果您希望 doSomething 与其他情况下一样工作，则必须传递 this 和 event：

onload="doSomething.call(this, event);"

注意：document、祖先 DOM 元素和 DOM 元素本身的属性are in the scope for the event handler（不是doSomething），这会导致非常混乱的行为。请参阅my answer here 了解更多信息。

document.body.onload = doSomething; 和 document.body.addEventListener('load', doSomething); 在范围和上下文方面是等效的，并且它们没有内联事件处理程序所具有的这种奇怪的范围行为。

More information about the different ways can be found on quirksmode.org.

【讨论】：

这里只是迂腐。经过一些测试，您所说的“类似于” 似乎有一点不同。似乎当放置在 body.onload 变量中时，回调函数存储为命名函数（与您的匿名函数相反）。见：jsfiddle.net/IQAndreas/ytW6B/1
虽然不应该影响范围，但为了完美起见，我只是将这一点包括在内。