Javascript addEventListener 函数

Question

我是事件处理程序的新手，我遇到了下面写的代码

document.addEventListener("DOMContentLoaded", function() {
    initialiseMediaPlayer();
}, false);

和

写一样的代码有什么不同吗

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer();, false);

最终我们调用的是同一个函数，那么以上述方式编写它有什么不同或有什么好处吗？

Answer 1

document.addEventListener("DOMContentLoaded", function() {
    initialiseMediaPlayer();
}, false);

在加载dom内容时会执行initialiseMediaPlayer。

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer();, false);

是语法错误；如果删除分号：

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer(), false);

立即调用initialiseMediaPlayer，然后将返回值（可能不是函数）传递给addEventListener。这不会按预期运行。

---

你可以的

    document.addEventListener("DOMContentLoaded", initialiseMediaPlayer, false);

（去掉括号 = 函数调用）。然后initialiseMediaPlayer将在加载的dom内容上执行，并根据需要进行操作。

但是，与前一种情况不同，initialiseMediaPlayer 实际上会接收浏览器给出的参数。此外，它的返回值被浏览器接收。在DOMContentLoaded 的情况下，这很可能无关紧要。

如果您直接传递initialiseMediaPlayer，您还可以避免创建一个额外的匿名函数。同样，从用户的角度来看，效果并不能真正感知到。

Answer 2

1)。是的，有很大的不同。第二个版本会报错。但即使你这样修复它：

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer(), false);

initialiseMediaPlayer 不会在 DOMContentLoaded 上被调用，因为 () 使它立即执行，而您必须将引用传递给 函数，而不是其结果。

2)。另一个显着的区别是调用的上下文。

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer, false);

initialiseMediaPlayer 将在document 对象的上下文中调用。而第一个版本将在Window 对象上下文中调用。

Answer 3

addEventListener() 函数的第二个参数接受 type function。所以你不能传递initialiseMediaPlayer();，因为那是一个函数调用。

你可以做的是：

var onDOMContentLoaded = function() {
    initialiseMediaPlayer();
};
document.addEventListener("DOMContentLoaded", onDOMContentLoaded, false);

Answer 4

第一种情况

document.addEventListener("DOMContentLoaded", function() {
    initialiseMediaPlayer();
}, false);

匿名函数function(){initialiseMediaPlayer();} 注册为在文档的事件“DOMContentLoaded”被触发时触发

第二种情况：

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer();, false);

注册为事件监听器的是表达式initialiseMediaPlayer()的结果

所以，是的，有区别:)