13

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

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

编写相同的代码有什么区别

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

最终我们调用的是同一个函数,那么它是否有区别,或者以上述方式编写它有什么好处?

4

4 回答 4

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

initialiseMediaPlayer在加载 dom 内容时执行。

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

是语法错误;如果删除分号:

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

立即调用initialiseMediaPlayer,然后将返回值(可能不是函数)传递给addEventListener. 这不会如愿以偿。


你可以做

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

(删除括号 = 函数调用)。然后initialiseMediaPlayer将在加载的 dom 内容上执行,并根据需要执行操作。

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

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

于 2013-03-06T19:16:12.150 回答
10

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

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

initialiseMediaPlayer不会被调用,DOMContentLoaded因为()让它立即执行,而你必须将引用传递给函数,而不是它的结果。

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

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

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

于 2013-03-06T19:12:47.280 回答
8

函数的第二个参数addEventListener()接受类型 function。所以你不能通过initialiseMediaPlayer();,因为那是一个函数调用。

你可以做的是:

var onDOMContentLoaded = function() {
    initialiseMediaPlayer();
};
document.addEventListener("DOMContentLoaded", onDOMContentLoaded, false);
于 2013-03-06T19:08:48.753 回答
0

在第一种情况下

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

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

在第二种情况下:

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

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

所以,是的,有区别:)

于 2013-03-06T19:13:02.510 回答