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
?
Regarding jQuery, you're right that they're stored in . data() , or more accurately jQuery. cache . But your handlers are never directly assigned to the element.
Right-click on the search icon button and choose “inspect” to open the Chrome developer tools. Once the dev tools are open, switch to the “Event Listeners” tab and you will see all the event listeners bound to the element. You can expand any event listener by clicking the right-pointing arrowhead.
The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target. Common targets are Element , or its children, Document , and Window , but the target may be any object that supports events (such as XMLHttpRequest ).
JavaScript provides an event handler in the form of the addEventListener() method. This handler can be attached to a specific HTML element you wish to monitor events for, and the element can have more than one handler attached.
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 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
The main difference between .onclick =
and .addEventListener
is that .onclick
sets an event handler replacing the existing one. Instead of that .addEventListener
adds more than one event handlers to a DOM Element. .addEventListener
is a modern way to add event handlers. Where they are stored, I have no idea, but not in onclick
because onclick keeps a single value, not an array of event handlers. You can read more about this here:
https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener#Older_way_to_register_event_listeners
http://www.w3.org/TR/DOM-Level-3-Events/#events-DocumentEvent-createEvent
So the answer is that you can not get the event handler added by .addEventListener
by getting the value of onlick
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With