Where is the event handler metadata stored? At the DOM, or ...?

Question

I always wondered ... so you have code like this:

$('#click-me'); 

and you attach it to this:

 $('#click-me').click(someFunction); 

where is the "metadata" that reads:

"Hi" jQuery-object # click-me, "I will point you to" someFunction "when clicked!"

I know that event handlers can be destroyed, for example, my situation with Backbone.js, where my events stopped shooting due to the fact that I was redrawing the entire page, destroying some background functions / objects / Views along the way .. (this is context, why am I asking this question)

NOW MY QUESTION :

Where are event metadata stored and how are they destroyed? Are they stored in the function associated with it? Are they inside the DOM metadata (if any)?

I'm trying to learn the intricacies of JavaScript because I'm tired of errors. In addition to this, I am wondering if I should keep track of garbage collection that can separate my events, etc. Coming from C #, I would say that JavaScript with the DOM is really something ...

(also as a note, how can I access these events and "debug" them? firefox? chrome?)

---

UPDATE

To put it in different words, where is the information that binds the DOM element to a specific event? DOM? Objects? (or .. jQuery displays this? Does JavaScript have meta data? in this context ..

Answer 1

jQuery saves all event bindings and the data cache to the jQuery.cache object. All DOM nodes that have been wrapped in jQuery and associated with events or a dataset attached to them are automatically cleared when you use jQuery html , empty , remove , replace , etc.

Therefore, it is very important never to use innerHTML or other native DOM methods to insert / replace content that was previously modified by jQuery. This will lead to leaks that you cannot clear unless you manually reset the jQuery.cache object.

There is also an undocumented jQuery.cleanData method that takes a set of DOM nodes as an argument and iterates over them and clears all the bindings, data and removes references to these elements from the cache. This can be useful if you have DOM fragments that have been separated from the main DOM tree, and there is a risk that they will not be cleaned correctly.

Answer 2

Refresh . So I misunderstood the question, you wanted to know how events are related in the context of only javascript and html. My initial answer below describes how jquery creates and manages events. It comes down to calling element.addEventListener .

In MDN docs, you see that eventtarget can be an element, document, window, or XMLHttpRequest. From the w3 specifications in DOM Events, the event target adds, deletes, and dispatches an event. Thus, even the information is probably stored in that it encapsulates things like elements, this will be implemented at the browser level.

From the question you mentioned about copying and then replacing html with the body, it erases the events, I think the browser just gives you the markup (without the event metadata), and then when you replace it, the metadata disappeared, ( http: // jsfiddle.net/qu9bF/1/ )

---

The original answer . How jquery event handlers work

So, I started digging this, for JQuery 1.4.2 (because I had to use a couple of tools, all of which are not updated)

First look at this: http://james.padolsey.com/jquery/#v=1.4.2&fn=click

 function (fn) { return fn ? this.bind(name, fn) : this.trigger(name); } 

This is how a click is determined; it is not defined in the code. JQuery defines this function for all functions / handlers as shown below, yes! they are created / defined dynamically:

 jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " + "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + "change select submit keydown keypress keyup error").split(" "), function( i, name ) { // the magic happens here.. //each string is added as a function to the prototype jQuery.fn[ name ] = function( fn ) { return fn ? this.bind( name, fn ) : this.trigger( name ); };//if a handler is NOT specified then attach an event OR call/trigger it if ( jQuery.attrFn ) { jQuery.attrFn[ name ] = true; } }); 

Here we have to look at bind, now bind() and one() also defined as follows. Find "Code: Binding and One Event" here

From here I used chrome with this http://jsfiddle.net/qu9bF/ script to enter the code. A block from c.each(["bind" is how the binding function is defined. The source is installed, but chrome can format it .

From here, when the code calls JQuery.events.add , you can find it in the " here . This is not add() , which is documented. I think

To the bottom, this piece of code is what magic does. Accordingly, it calls element.addEventListener or attachEvent . See how it adds value to attachEvent .

 // Check for a special event handler // Only use addEventListener/attachEvent if the special // events handler returns false if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) { // Bind the global event handler to the element if ( elem.addEventListener ) { elem.addEventListener( type, eventHandle, false ); } else if ( elem.attachEvent ) { elem.attachEvent( "on" + type, eventHandle ); } } 

And here it is! :) I hope he answered your questions. You can link to non-minified versions of the jquery source and go through it to understand what is going on. IMO sometimes the IE9 debugger is more intuitive (which is the only thing I use for it), and use the pages that I mentioned to view the sound source.

Answer 3

Regular events, such as click or submit (if they are not jQuery related), are actually just properties ("onclick", "onsubmit") of the DOM elements themselves.

For jQuery events, the library saves its own record when you link it and view it when it starts. jQuery puts all the data about the elements in a standard place, which you can access with $(e).data() . For events, it's just $(e).data('events') .

You can unlock jQuery events with $().unbind() and regular events with the delete keyword to remove the object property corresponding to the given event.

Answer 4

jQuery saves its own map of element event handlers. Rarely, very rarely, you can worry about this if you somehow do not abuse the library.