Javascript events: jQuery event interface Overview

Javascript events: jQuery event interface Overview
Event operations are very frequent in JavaScript. However, the event API of native javaScript makes new users feel unfriendly. In addition, the event depends on DOM, and the Native javaScript's choice of DOM is a trigger. This led to the emergence of jQuery-leader compatibility processing for native js event operations, API optimization and some function expansion. Now, take jQuery2.0.3 as an example. Let's take a look at jQuery's event interface. First, expand to jQuery. example method in prototype: // 5049-51501 jQuery. fn. extend ({2 on: function (types, selector, data, fn,/* INTERNAL */one ){...}, 3 one: function (types, selector, data, fn ){...}, 4 off: function (types, selector, fn ){...}), 5 trigger: function (type, data ){...}, 6 triggerHandler: function (type, data ){...} 7}) // 6742-6773 // provides some convenient methods 1 jQuery. each ("blur focus focusin focusout lo Ad 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 binding 6 jQuery. fn [name] = function (data, fn) {7 return arguments. length> 0? 8 this. on (name, null, data, fn): 9 this. trigger (name); 10}; 11}); 12 jQuery. fn. extend ({13 hover: function (fnOver, fnOut ){...}, 14 bind: function (types, data, fn ){...}, 15 unbind: function (types, fn ){...}, 16 delegate: function (selector, types, data, fn ){...}, 17 undelegate: function (selector, types, fn ){...} 18}) The diversity of jQuer statements can be seen here. In addition to triggerHandler, each method is commonly used in actual development. The usage of triggerHandler is as follows: js Code: $ ("# inputTxt "). on ("focus", function () {console. log ("Get Focus")}) $ ("# triggerHandler "). on ("click", function () {$ ("# inputTxt "). triggerHandler ("focus")}) $ ("# trigger "). on ("click", function () {$ ("# inputTxt "). trigger ("focus")}) html code: <input id = "inputTxt" type = "text" name = "" id = ""/> <input id = "trigger" type = "button" value = "trigger" /> <input id = "triggerHandler" type = "button" value = "TriggerHandler trigger"/> when you click "trigger", trigger the custom focus event and default focus event in the text input box and click "triggerHandler trigger, only the custom focus event is triggered. The default event is blocked. In fact, triggerHandler not only blocks default events, but also bubble events. The above interface is the external instance interface of jQuery. But we know that jQuery's instance methods are basically a layer of skin, and the true implementation is more dependent on jQuery's extension method. Expansion Method 1 jQuery. event = {2 global :{}, 3 add: function (elem, types, handler, data, selector) {}, 4 remove: function (elem, types, handler, selector, mappedTypes) {}, 5 trigger: function (event, data, elem, onlyHandlers) {}, 6 dispatch: function (event) {}, 7 handlers: function (event, handlers) {}, 8 props: "altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shif TKey target timeStamp view which ". split (""), 9 fixHooks :{}, 10 keyHooks: {11 props: "char charCode key keyCode ". split (""), 12 filter: function (event, original) {}13}, 14 mouseHooks: {15 props: "button buttons clientX clientY offsetX offsetY pageX pageY screenX screenY toElement ". split (""), 16 filter: function (event, original) {}17}, 18 fix: function (event) {}, 19 special :{}, 20 simulate: fun Ction (type, elem, event, bubble) {}21} 22 jQuery. event = function (src, props) {} 23 jQuery. event. prototype = {24 isdefapreprevented: returnFalse, 25 isPropagationStopped: returnFalse, 26 rows: returnFalse, 27 preventDefault: function () {}, 28 stopPropagation: function () {}, 29 rows: function () {} 30} finally some compatibility processing 1 jQuery. each ({2 mouseenter: "mouseover", 3 Mouseleave: "mouseout" 4}, function (orig, fix) {5 jQuery. event. special [orig] = {6 delegateType: fix, 7 bindType: fix, 8 handle: function (event) {9... 10} 11}; 12}); 13 14 if (! JQuery. support. focusinBubbles) {15 jQuery. each ({focus: "focusin", blur: "focusout"}, function (orig, fix) {16 handler = function (event) {17 jQuery. event. simulate (fix, event.tar get, jQuery. event. fix (event), true); 18}; 19 jQuery. event. special [fix] = {20 setup: function () {21... 22}, 23 teardown: function () {24... 25} 26}; 27}); 28} Okay. how do these interfaces work with jQuery in the next example. event, jQuery. event collaborative work.