这三种监听事件的方式的作用域有何不同

How the does scope differ between these three ways of listening for events?

本文关键字：方式 作用域 何不同 事件 监听 三种      更新时间：2023-09-26

假设函数doSomething()是在同一个地方定义的，那么函数在执行时的作用域在这三种侦听事件的方法之间是否不同？

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

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

onload="doSomething();"与类似

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

在事件处理程序本身内部，this指的是处理程序绑定到的元素，但在doSomething内部，this将指的是window，因为您正在"正常"调用函数。doSomething也无法访问事件对象。如果你想让doSomething和其他情况一样工作，你必须传递this和event：

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

注意：document、祖先DOM元素和DOM元素本身的属性都在事件处理程序的范围内（而不是doSomething），这可能会导致非常混乱的行为。请在此处查看我的答案以了解更多信息。

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

有关不同方式的更多信息，请访问quicksmode.org。

相关文章：