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?
document.addEventListener("DOMContentLoaded", function() {
initialiseMediaPlayer();
}, false);
Will execute initialiseMediaPlayer when the dom content is loaded.
document.addEventListener("DOMContentLoaded", initialiseMediaPlayer();, false);
is a syntax error; if you remove the semicolon:
document.addEventListener("DOMContentLoaded", initialiseMediaPlayer(), false);
calls initialiseMediaPlayer immediately, then passes the return value (which likely isn't a function) to addEventListener. This won't act as desired.
You can do
document.addEventListener("DOMContentLoaded", initialiseMediaPlayer, false);
(remove the parentheses = function call). Then initialiseMediaPlayer will be executed on dom content loaded, and act as desired.
However, unlike in the former case, initialiseMediaPlayer will 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.
You also avoid creating one extra anonymous function if you pass initialiseMediaPlayer directly. Again, the effect is not really perceptible from the user's standpoint.
1). Yes there is great difference. The second version will throw an error. But even if you fix it like this:
document.addEventListener("DOMContentLoaded", initialiseMediaPlayer(), false);
initialiseMediaPlayer will not be called on DOMContentLoaded because () make it execute immediately, while you have to pass a referece to a function, not its result.
2). Another significant difference is the context of invocation.
document.addEventListener("DOMContentLoaded", initialiseMediaPlayer, false);
initialiseMediaPlayer will be invoked in the context of document object. While the first version will be called in Window object context.
this will refer to the different objects inside your function.The second argument on the addEventListener() function accepts type function. So you cannot pass initialiseMediaPlayer(); because that is a function invocation.
What you can do is:
var onDOMContentLoaded = function() {
initialiseMediaPlayer();
};
document.addEventListener("DOMContentLoaded", onDOMContentLoaded, false);
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
in the second case:
document.addEventListener("DOMContentLoaded", initialiseMediaPlayer();, false);
what is registered as the event listener is the result of the expression initialiseMediaPlayer()
so, yes, there is a difference :)
