Javascript addEventListener函数

Question

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

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

编写相同的代码是否有任何区别

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

最终我们调用相同的函数,它是否会产生影响,或者以上述方式编写它有什么优势？

Answer 1

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直接传递,也可以避免创建一个额外的匿名函数.同样,从用户的角度来看,效果并不是真正可感知的.

Answer 2

1).是的,有很大的不同.第二个版本将抛出错误.但即使你这样解决它:

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

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

2).另一个重要的区别是调用的上下文.

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

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

Answer 3

addEventListener()函数的第二个参数接受类型函数.因此,您无法传递,initialiseMediaPlayer();因为这是一个函数调用.

你能做的是:

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