JavaScript event: Communication between an instance object and an extended object in a jquery event

We have summed up the instance prototype objects in the Jqery event, and now we look at how they communicate with each other.

First look at the convenient method:

1 //called on () and trigger () under the instance object2Jquery.each (("Blur focus focusin focusout Load resize scroll unload click DblClick" +3"MouseDown mouseup mousemove mouseover mouseout mouseenter mouseleave" +4"Change Select Submit KeyDown keypress KeyUp error ContextMenu"). Split (""),function(i, name) {5jquery.fn[name] =function(data, FN) {6         returnArguments.length > 0?7              This. On (Name,NULL, Data, FN):8              This. Trigger (name);9     };Ten }); One  A JQuery.fn.extend ({ -     //The MouseEnter and MouseLeave of the above instance are called -Hoverfunction(Fnover, fnout) { the         return  This. MouseEnter (Fnover). MouseLeave (Fnout | |fnover); -     }, -     //is invoked on the instance under the -Bindfunction(types, data, fn) { +         return  This. On (types,NULL, data, FN); -     }, +     //The call is off under the instance AUnbindfunction(types, fn) { at         return  This. Off (types,NULL, FN); -     }, -     //is invoked on the instance under the -Delegatefunction(selector, types, data, fn) { -         return  This. On (types, selector, data, FN); -     }, in     //The call is off under the instance -Undelegate:function(selector, types, fn) { to         //(namespace) or (selector, types [, fn]) +         returnArguments.length = = = 1? This. Off (Selector, "* *"): This. Off (types, selector | | "**", FN); -     } the});

Therefore, the convenient method knowledge calls the On,off,triger three methods under the example. Its own learning value is not high.

Next is an example method for the convenient method invocation.

1 JQuery.fn.extend ({2     //The call is the Add () under Jquery.event3Onfunction(types, selector, data, FN,/*INTERNAL*/One ) { 4JQuery.event.add ( This, types, FN, data, selector);5     },6     //is called the above on7Onefunction(types, selector, data, FN) {8         return  This. On (types, selector, data, FN, 1 );9     },Ten     //The call is the Remove () under Jquery.event OneOfffunction(types, selector, fn) { AJQuery.event.remove ( This, types, FN, selector); -     }, -     //called the trigger () under Jquery.event theTriggerfunction(type, data) { -         return  This. each (function() { -JQuery.event.trigger (type, data, This ); -         }); +     }, -     //called the trigger () under Jquery.event +Triggerhandler:function(type, data) { A         returnJQuery.event.trigger (type, data, Elem,true );... at     } -})

The main call here is jquery.event under the 3 methods: Add (), remove (), trigger (). Its own learning significance is also small. Let's take a look at these three methods under Jquery.event.

1Jquery.event = {2 global: {},3     //Binding Events4Addfunction(Elem, types, handler, data, selector) {5         ...6Special = jquery.event.special[Type] | | {};7         ...8 jQuery.event.dispatch.apply (Eventhandle.elem, arguments)9         Ten     }, One     //Removing events ARemovefunction(Elem, types, Handler, selector, mappedtypes) { -         ... -Special = jquery.event.special[Type] | | {}; the         if(Rfocusmorph.test (Type +jQuery.event.triggered)) { -     }, -     //Triggering events manually -Triggerfunction(event, data, Elem, onlyhandlers) {}, +     //Event Distribution -Dispatchfunction(event) {}, +Handlers:function(event, handlers) {}, AProps: "Altkey bubbles cancelable ctrlkey currenttarget eventphase metakey relatedtarget shiftkey target TimeStamp view WH Ich ". Split (" "), at fixhooks: {}, -     //Properties and Remediation methods for keyboard event objects - keyhooks: {}, -     //Properties and Remediation methods for mouse event objects - mousehooks: {}, -     //Compatibility-related inFixfunction(event) {}, -     //set of event fixup objects to Special: { + Load: { -Nobubble:true the }, * Focus: { $Triggerfunction() {},Panax NotoginsengDelegatetype: "Focusin" -         }, the Blur: { +Triggerfunction() {}, ADelegatetype: "Focusout" the         }, + click: { -Triggerfunction() {}, $_default:function(){} $         }, - beforeunload: { -Postdispatch:function(event) {} the         } -     },Wuyi     //simulate events, fix event compatibility swim theSimulate:function(type, Elem, event, bubble) {} -}

The three methods under the JQuery event object are the subject. The rest is a tool method that corrects browser compatibility and serves these three methods.

JavaScript event: Communication between an instance object and an extended object in a jquery event