Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do jQuery Custom events work exactly

I can't find any good resources on how custom events in jquery are actually implemented. Like how they simulate the event bubbling, etc.

like image 978
Rod Johnson Avatar asked Jan 11 '11 16:01

Rod Johnson


People also ask

How do jQuery events work?

These events are often triggered by the end user's interaction with the page, such as when text is entered into a form element or the mouse pointer is moved. In some cases, such as the page load and unload events, the browser itself will trigger the event.

How does JavaScript events work?

Javascript has events that provide a dynamic interface to a webpage. These events are connected to elements in the Document Object Model(DOM). Also, these events by default use the bubbling propagation i.e, upwards in the DOM from children to parent. We can bind events either as inline or in an external script.

What is an event and how event handled in jQuery?

The current DOM element within the event bubbling phase. event.data. Contains the optional data passed to an event method when the current executing handler is bound. event.delegateTarget. Returns the element where the currently-called jQuery event handler was attached.


2 Answers

This way:

// 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 ]();
    }
}

What's going on here is as follows:

When trigger is called jQuery checks to see if the event is being triggered globally ($.trigger("event_name");).

If it is not being triggered globally, and propagation has not been stopped and the element in question has a parent element (!event.isPropagationStopped() && parent) then jQuery calls the trigger event manually on the parent element.

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

There is quite a bit more going on -- see event.js in the jQuery source code.

like image 192
Sean Vieira Avatar answered Oct 30 '22 00:10

Sean Vieira


Check out the tutorials

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

Also checkout this SO question

like image 1
Wazy Avatar answered Oct 29 '22 22:10

Wazy