How jQuery custom events work

Question

I can not find any good resources about how user events in jquery are really implemented. For example, how they simulate event bubbles, etc.

Answer 1

Thus:

// bubbling is internal trigger: function( event, data, elem /*, bubbling */ ) { // Event object or event type var type = event.type || event, bubbling = arguments[3]; // Handle a global trigger if ( !elem ) { // Don't bubble custom events when global (to avoid too much overhead) event.stopPropagation(); // Only trigger if we've ever bound an event for it if ( jQuery.event.global[ type ] ) { jQuery.each( jQuery.cache, function() { if ( this.events && this.events[type] ) { jQuery.event.trigger( event, data, this.handle.elem ); } }); } } // ... snip ... // Trigger the event, it is assumed that "handle" is a function var handle = elem.nodeType ? jQuery.data( elem, "handle" ) : (jQuery.data( elem, "__events__" ) || {}).handle; if ( handle ) { handle.apply( elem, data ); } var parent = elem.parentNode || elem.ownerDocument; // ... snip .... if ( !event.isPropagationStopped() && parent ) { jQuery.event.trigger( event, data, parent, true ); } else if ( !event.isDefaultPrevented() ) { // ... snip ... jQuery.event.triggered = true; target[ targetType ](); } } 

Here the following happens:

When the trigger is called jQuery checks if the event is fired globally ( $.trigger("event_name"); ).

If it does not start globally, and distribution is not stopped, and this element has a parent element ( !event.isPropagationStopped() && parent ), then jQuery will trigger a trigger event manually on the parent element.

 jQuery.event.trigger( event, data, parent, true ); 

There are quite a few changes in the jQuery source code - see event.js in the jQuery source code.

Answer 2

Check out the tutorials

 $(document).bind("eventType", ...); // This is equivalent to the plugin $.subscribe("eventType", ...); $(document).trigger("eventType"); // equivalent to plugin $.publish("eventType"); 

Also check out this SO question