JavaScript event: JQuery Event Interface Overview

The operation of the event, in JavaScript, is very frequent. However, the native JavaScript event API makes the novice feel very unfriendly, plus the event relies on DOM, and native JavaScript's choice of Dom is kick. This results in a jquery-led compatibility process for native JS event operations, API optimization, and expansion of some features.

Now, take jQuery2.0.3 as an example, let's look at the event interface of jquery.

First look at the example methods that extend to Jquery.prototype:

//5049-5150
1 JQuery.fn.extend ({2Onfunction(types, selector, data, FN,/*INTERNAL*/One ) { ... },3Onefunction(types, selector, data, fn) {...},4Offfunction(types, selector, fn) {...}),5Triggerfunction(type, data) {...},6Triggerhandler:function(type, data) {...}7})

6742-6773
Some handy ways to provide
1Jquery.each (("Blur focus focusin focusout Load resize scroll unload click DblClick" +2"MouseDown mouseup mousemove mouseover mouseout mouseenter mouseleave" +3"Change Select Submit KeyDown keypress KeyUp error ContextMenu"). Split (""),function(i, name) {4 5     //Handle Event Binding6jquery.fn[name] =function(data, FN) {7         returnArguments.length > 0?8              This. On (Name,NULL, Data, FN):9              This. Trigger (name);Ten     }; One }); A JQuery.fn.extend ({ -Hoverfunction(Fnover, fnout) {...}, -Bindfunction(types, data, fn) {...}, theUnbindfunction(types, fn) {...}, -Delegatefunction(selector, types, data, fn) {...}, -Undelegate:function(selector, types, fn) {...} -})

The diversity of Jquer is a glimpse of one or two here.

In addition to Triggerhandler, each of these methods is more commonly used in practical development.

The usage of Triggerhandler is as follows:

JS Code:

function () {    console.log ("Get Focus")}) $ (function() {    $ ("#inputTxt"). Triggerhandler ("Focus")}) $ (function() {    $ ("#inputTxt"). Trigger ("Focus" )})

HTML code:

<inputID= "Inputtxt"type= "text"name=""ID="" /><inputID= "Trigger"type= "button"value= "Trigger Trigger"/><inputID= "Triggerhandler"type= "button"value= "Triggerhandler trigger"/>

When you click the "Trigger Trigger" button, the custom focus event and default focus event of the text input box is triggered

By clicking on the "Triggerhandler trigger" button, only the custom focus event is triggered, and the default event is blocked.

In fact, Triggerhandler not only blocks default events, but also blocks bubbling events.

The above interface is jquery's external instance interface. But we know that the example of jquery is basically a layer of epidermis, its real implementation is more by the jquery expansion method.

Expansion methods

1Jquery.event = {2 global: {},3Addfunction(Elem, types, handler, data, selector) {},4Removefunction(Elem, types, Handler, selector, mappedtypes) {},5Triggerfunction(event, data, Elem, onlyhandlers) {},6Dispatchfunction(event) {},7Handlers:function(event, handlers) {},8Props: "Altkey bubbles cancelable ctrlkey currenttarget eventphase metakey relatedtarget shiftkey target TimeStamp view WH Ich ". Split (" "),9 fixhooks: {},Ten keyhooks: { OneProps: "Char charcode key KeyCode". Split (""), AFilterfunction(event, original) {} -     }, - mousehooks: { theProps: "button buttons ClientX clientY offsetX offsetY pageX pagey screenX screenY toelement". Split (""), -Filterfunction(event, original) {} -     }, -Fixfunction(event) {}, + Special: {}, -Simulate:function(type, Elem, event, bubble) {} + } AJquery.event =function(src, props) {} atJQuery.Event.prototype = { - Isdefaultprevented:returnfalse, - Ispropagationstopped:returnfalse, - Isimmediatepropagationstopped:returnfalse, -Preventdefault:function() {}, -Stoppropagation:function() {}, inStopimmediatepropagation:function() {} -}

Finally, some compatibility processing

1 Jquery.each ({2MouseEnter: "MouseOver",3MouseLeave: "Mouseout"4},function(orig, fix) {5jquery.event.special[Orig] = {6 Delegatetype:fix,7 Bindtype:fix,8Handlefunction(event) {9             ...Ten         } One     }; A }); -  - if( !jQuery.support.focusinBubbles) { theJquery.each ({focus: "Focusin", Blur: "Focusout"},function(orig, fix) { -Handler =function(event) { -JQuery.event.simulate (fix, Event.target, JQuery.event.fix (event),true ); -             }; +jquery.event.special[fix] = { -Setupfunction() { +                 ... A             }, atTeardownfunction() { -                 ... -             }     -         }; -     }); -}

All right, next time. How these interfaces work with jquery.event,jquery.event in our instance method.

JavaScript event: JQuery Event Interface Overview