Question

I start with an empty page. If I run document.body.onclick I get null. If I apply following code:

document.body.onclick = function() { return "Click"; };

I get function() { return "Click"; } when I run document.body.onclick. That makes sense! But when I run

document.body.addEventListener("click", function() { return "Click"; });

document.body.onclick is still null, but the output is "Click" when I run document.body.click().

So my question is, where is the function stored when using addEventListener?

Answer 1

Its stored in the actual list (array) of Event listeners for body.

Elements have a list of function references in them for their event listeners. These references are not in the DOM. When firing an event, the browser has to run thru all the appropriate elements looking for these references and running them in order.

Anyhow… There is plenty going on in the background that the DOM does not see. The entire event system is one of them. And well, the whole Javascript engine essentially and with a large object tree for the current loaded page, all stored in mysterious memory. They are generally accessed by using the document and window interfaces, just like the DOM. But properly registered events will be in this large object tree that’s stored in memory, which is not the same as the DOM. Just closely related. I view the DOM as an interface or middle-man between this large object tree and the HTML itself.

Moving on… onclick is limited to just one value or a single string of javascript just sitting there in the DOM. Not actually registered. So, not an actual Event listener. Here the DOM is kind of like a shim in that it props up the onclick strings to run as events. So that this string also gets run when the event is fired. By the browser, at the right time, mysteriously. In a round about way, it could be said that is part of what the DOM does in general, it shims in all the in-line text like this from HTML, so that its accessible by document. But generally, they are just stored as strings instead of actual objects in the tree. This is probably one of many reasons why the DOM is so foobar.

Whereas addEventListenener actually registers it as a real event, thus you can:

• Have multiples
• Access them as objects
• Add and remove them at will
• Select an event propagation scheme
• Control event propagation itself during runtime

• Have the event auto remove itself after first run

  … and a few other features.

They are both, sort-of, two different event listeners for the same event. One is a full event listener when using addEventListener. And the other is just a string of text sitting in the DOM that the browser will run “at the right time”, but not a actual full event listener.

This question might shed some light… addEventListener vs onclick