Javascript addEventListener function

Question

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

document.addEventListener(\"DOMContentLoaded\", function() {
    initialiseMed         


        

Answer 1

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 :)

Answer 2

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);

Answer 3

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.

Answer 4

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.