Javascript addEventListener 函数

Javascript addEventListener function

提问by Bazinga777

I am new to Event Handlers and I have come across a code that is written below

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

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

Is there any difference in writing the same code as

编写相同的代码有什么不同吗

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

Ultimately we are calling the same function, so does it make a difference or is there some advantage in writing it in the manner above?

最终我们调用的是同一个函数，那么它会有所不同还是以上述方式编写它有什么优势？

回答by John Dvorak

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

Will execute initialiseMediaPlayerwhen the dom content is loaded.

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

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

is a syntax error; if you remove the semicolon:

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

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

calls initialiseMediaPlayerimmediately, then passes the return value (which likely isn'ta function) to addEventListener. This won't act as desired.

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

---

---

You can do

你可以做

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

(remove the parentheses = function call). Then initialiseMediaPlayerwill be executed on dom content loaded, and act as desired.

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

However, unlike in the former case, initialiseMediaPlayerwill actually receive the arguments given by the browser. Also, its return value is received by the browser. In case of DOMContentLoaded, most likely this doesn't matter much.

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

You also avoid creating one extra anonymous function if you pass initialiseMediaPlayerdirectly. Again, the effect is not really perceptible from the user's standpoint.

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

回答by dfsq

1). Yes there is great difference. The second version will throw an error. But even if you fix it like this:

1）。是的，有很大的不同。第二个版本会抛出错误。但即使你像这样修复它：

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

initialiseMediaPlayerwill not be called on DOMContentLoadedbecause ()make it execute immediately, while you have to pass a referece to a function, not its result.

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

2). Another significant difference is the context of invocation.

2）。另一个显着差异是调用的上下文。

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

initialiseMediaPlayerwill be invoked in the context of documentobject. While the first version will be called in Windowobject context.

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

回答by Amy

The second argument on the addEventListener()function accepts type function. So you cannot pass initialiseMediaPlayer();because that is a function invocation.

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

What you can do is:

你可以做的是：

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

回答by Francisco Meza

in the first case

在第一种情况下

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

the anonymous function function(){initialiseMediaPlayer();}is registered to be triggered when the document's event 'DOMContentLoaded' gets triggered

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

in the second case:

在第二种情况下：

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

what is registered as the event listener is the result of the expression initialiseMediaPlayer()

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

so, yes, there is a difference :)

所以，是的，有区别:)