¿Cómo funcionan exactamente los eventos de jQuery Custom?

Question

No encuentro ningún buen recurso sobre cómo se implementan los eventos personalizados en jquery. Al igual que la forma en que simulan el burbujeo de eventos, etc.

Answer 1

esta manera:

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

lo que está pasando aquí es el siguiente :

Cuando trigger se llama jQuery comprueba si el evento se desencadena globalmente ($.trigger("event_name");).

Si es no se dispare a nivel mundial, y la propagación no se ha dejado de y el elemento en cuestión tiene un elemento padre (!event.isPropagationStopped() && parent) entonces jQuery llama al evento de disparo manualmente en el elemento padre.

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

Hay un poco más en juego - ver event.js en el código fuente de jQuery.

Answer 2

Mira la tutorials

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

también comprobación este SO question