JQuery-Overview of the event Module

JQuery's event module is complicated. We mentioned the packaging of event objects. That is, some compatibility issues are unified. This article will review the entire event module of jQuery. JQuery. event. add/jQuery. event. remove/jQuery. event. trigger will be analyzed in detail later. Although... Synt

JQuery's event module is complicated. We mentioned the packaging of event objects. That is, some compatibility issues are unified. This article will review the entire event module of jQuery. JQuery. event. add/jQuery. event. remove/jQuery. event. trigger will be analyzed in detail later.


Although the Code of the event module is difficult to read, its API interfaces are still very clear. As follows:

1 add events (bind/one/live/delegate/hover/toggle)

Bind Basic add event functions.

One adds an event function that is executed only once.

Live event proxy (using document proxy ).

Delegate event proxy (use the specified Element proxy ).

Hover simulates the hover of css.

Toggle display/hide.


Bind/one/live all use the internal jQuery. event. add to add events.

Delegate calls live internally.

Hover uses mouseenter/mouseleave internally, while mouseenter/mouseleave uses bind.

Toggle uses click internally, while click calls bind internally.


In fact, a jQuery each call adds 24 shortcuts for adding events to the jQuery object.

 

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 ) {    // Handle event binding    jQuery.fn[ name ] = function( data, fn ) {        if ( fn == null ) {            fn = data;            data = null;        }        return arguments.length > 0 ?            this.bind( name, data, fn ) :            this.trigger( name );    };    if ( jQuery.attrFn ) {        jQuery.attrFn[ name ] = true;    }});

For example

Remember, bind calls jQuery. event. add, so jQuery. event. add is the core of the entire jQuery add event module. All of the above methods are built on top of them.

 

2. delete an event (unbind/die/undelegate)

Basic Methods for unbind event deletion. You can delete a specified handler, delete all handler of a type of event, or even delete all events mounted on the element. It calls jQuery. event. remove internally.

Die/undelegate Delete event proxy. Unbind is used internally.


Therefore, jQuery. event. remove is the core of the entire jQuery event deletion module. Unbind/die/undelegate are all upper-layer applications built on it.



3. trigger event (trigger/triggerHandler)

Trigger triggers an event (will bubble up)

TriggerHandler triggers an event (not bubbling)


Trigger/triggerHandler calls jQuery. event. trigger internally. Therefore, jQuery. event. trigger is the core of the entire jQuery trigger event module.