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

Source: Internet
Author: User
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:







Event Management Tool Functions

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



Event object

JQuery. Event (simulate partial DOM3 Event interfaces)



Event exception

Ready live beforeunload


Mouseenter mouseleaver (corrected to mouseover mouseout)


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



Event binding, deletion, and triggering

Bind one delegate live die


Unbind undelegate die


Trigger triggerHandler



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;





Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.