JQuery source code analysis-10 Event processing-Event-source code structure

Author: nuysoft/high cloud QQ: 47214707 EMail: nuysoft@gmail.com10.2 source code structure jQuery event module mainly includes the following content: submodule interface 1 event management tool function jQuery. event. add/remove/trigger/handle/fix/Special Event object jQue...

 

Author: nuysoft/high cloud QQ: 47214707 EMail: nuysoft@gmail.com

 

 

10.2 source code structure

JQuery's event module mainly includes the following content:

 

 

Sub-module

Interface

 

1

Event Management Tool Functions

JQuery. event. add/remove/trigger/handle/fix/special

 

2

Event object

JQuery. Event (simulate partial DOM3 Event interfaces)

 

3

Event exception

Ready live beforeunload

 

Mouseenter mouseleaver (corrected to mouseover mouseout)

 

Focusin focusout submit change (bubble events not supported by the browser)

 

4

Event binding, deletion, and triggering

Bind one delegate live die

 

Unbind undelegate die

 

Trigger triggerHandler

 

5

Convenient events and scaling methods

Toggle hover, etc.

 

 

 

 

Look at the source code structure:

 

//----------------------------------------------------------------------------

 

// ① Functions of the Event Management Tool

 

//----------------------------------------------------------------------------

 

 

 

JQuery. event = {

 

// Bind the event handle

 

Add: function (elem, types, handler, data ){},

 

// Delete

 

Remove: function (elem, types, handler, pos ){},

 

// Trigger

 

Trigger: function (event, data, elem, onlyHandlers ){},

 

// Execute

 

Handle: function (event ){},

 

// Event attributes

 

Props: "Maid maid ". split (""),

 

// Use jQuery. Event to encapsulate the original Event and correct the attribute.

 

Fix: function (event ){},

 

// Event exception: ready live beforeunload mouseenter mouseleaver focusin focusout submit change

 

Special :{

 

Ready :{},

 

Live :{},

 

Beforeunload :{}

 

}

 

};

 

 

 

//----------------------------------------------------------------------------

 

// ② JQuery event object, simulates and implements some W3C standard DOM Level 3 event models, and unifies the event attributes

 

//----------------------------------------------------------------------------

 

 

 

JQuery. Event = function (src, props ){};

 

// JQuery event object prototype

 

JQuery. Event. prototype = {

 

// Prevent default browser behavior

 

PreventDefault: function (){},

 

// Stop event Propagation

 

StopPropagation: function (){},

 

// Stop event propagation immediately

 

StopImmediatePropagation: function (){},

 

// Whether the default browser behavior has been blocked

 

Isdefapreprevented: returnFalse,

 

// Whether event propagation has been stopped

 

IsPropagationStopped: returnFalse,

 

// Whether event propagation has been stopped immediately

 

IsImmediatePropagationStopped: returnFalse

 

};

 

 

 

//----------------------------------------------------------------------------

 

// ③ Special event cases

 

//----------------------------------------------------------------------------

 

 

 

// Create a mouseenter mouseleave event, change mouseenter to mouseover, and change mouseleave to mouseout.

 

JQuery. each ({

 

Mouseenter: "mouseover ",

 

Mouseleave: "mouseout"

 

}, Function (orig, fix ){});

 

 

 

// Submit event proxy. If the submit event bubble is not supported

 

If (! JQuery. support. submitBubbles ){}

 

 

 

// Change event proxy. If change event bubbling is not supported

 

If (! JQuery. support. changeBubbles ){}

 

 

 

// Trigger the event handle and default action of the specified type on the elem Element

 

Function trigger (type, elem, args ){}

 

 

 

// If focusin event bubbling is not supported, convert it to focus implementation (focusin → focus, focusout → blur)

 

If (! JQuery. support. focusinBubbles ){

 

JQuery. each ({focus: "focusin", blur: "focusout"}, function (orig, fix ){});

 

}

 

 

 

//----------------------------------------------------------------------------

 

// ④ Event binding, deletion, and triggering

 

//----------------------------------------------------------------------------

 

 

 

// Bind the specified type of event handler to the Matching Element

 

JQuery. each (["bind", "one"], function (I, name ){

 

JQuery. fn [name] = function (type, data, fn ){};

 

});

 

 

 

JQuery. fn. extend ({

 

// Unbind: delete a previously attached event handle.

 

Unbind: function (type, fn ){},

 

// Event proxy, call the live Method for implementation

 

Delegate: function (selector, types, data, fn ){},

 

// Delete the event proxy and call the unbind or die implementation.

 

Undelegate: function (selector, types, fn ){},

 

// Execute event processing functions and default actions

 

Trigger: function (type, data ){},

 

// Execute the event processing function. If the default action is not executed, only the first element of the matching is triggered and no jQuery object is returned.

 

TriggerHandler: function (type, data ){},

 

// Bind the Matching Element to two or more event processing functions. When an event is triggered, these functions are executed cyclically in sequence.

 

Toggle: function (fn ){},

 

// Convenient method: bind two event processing functions to the matching element, execute handlerIn when the mouse moves in, and execute handlerOut when the mouse moves out

 

Hover: function (fnOver, fnOut ){}

 

});

 

 

 

// Live binds an event handler to the element matching the current selector, including existing and added in the future, that is, any added element will be bound to the event handler function as long as it matches the current selector.

 

// The die removes one or all event handlers appended with live.

 

JQuery. each (["live", "die"], function (I, name ){});

 

// Live execution handle

 

Function liveHandler (event ){}

 

// Add selector after the live event type as the namespace

 

Function liveConvert (type, selector ){}

 

 

 

//----------------------------------------------------------------------------

 

// ⑤ Convenient interface for common events, binding or triggering

 

//----------------------------------------------------------------------------

 

 

 

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 ){

 

Return arguments. length> 0?

 

This. bind (name, data, fn ):

 

This. trigger (name );

 

};

 

// Register (ADD) the event name to jQuery. attrFn. When an operation is performed on an attribute of the same name, it is converted to a call to the event interface.

 

If (jQuery. attrFn ){

 

JQuery. attrFn [name] = true;

 

}

 

});