javascript事件之：jQuery事件介面概述

javascript事件之：jQuery事件介面概述
事件的操作，在JavaScript是非常頻繁的。然而原生javaScript的事件API讓新手感覺非常不友好，再加上事件依賴於DOM，而原生javaScript對DOM的選擇又是三板斧的功力。由此催生出以jQuery為領頭羊的對原生js事件操作的相容性處理，API最佳化以及一些功能的拓展。 　　現在，以jQuery2.0.3為例，我們來看看jQuery的事件介面。 　　首先來看拓展到jQuery.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//提供的一些便捷方法 1 jQuery.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 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 }) jQuer寫法的多樣性在這裡可窺見一二。 這裡的方法除了triggerHandler每一個在實際開發中都比較常用。 triggerHandler的用法如下： js代碼：  $("#inputTxt").on("focus", function(){    console.log("獲得焦點")})$("#triggerHandler").on("click", function(){    $("#inputTxt").triggerHandler("focus")})$("#trigger").on("click", function(){    $("#inputTxt").trigger("focus")}) html代碼： <input id="inputTxt" type="text" name="" id="" /><input id="trigger" type="button" value="trigger觸發"/><input id="triggerHandler" type="button" value="triggerHandler觸發"/>當點擊”trigger觸發“按鈕，觸發text輸入框的自訂focus事件和預設的focus事件 而點擊“triggerHandler觸發”按鈕，僅僅觸發自訂focus事件，預設事件被阻止了。 事實上，triggerHandler不僅能夠阻止預設事件，還能阻止冒泡事件。   以上的介面就是jQuery對外的執行個體介面。可是我們知道，jQuery的執行個體方法基本上都是一層表皮，其真正的實現更多是靠jQuery拓展方法。 拓展方法   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 shiftKey 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: function( type, elem, event, bubble ) {}21 }22 jQuery.Event = function( src, props ) {}23 jQuery.Event.prototype = {24     isDefaultPrevented: returnFalse,25     isPropagationStopped: returnFalse,26     isImmediatePropagationStopped: returnFalse,27     preventDefault: function() {},28     stopPropagation: function() {},29     stopImmediatePropagation: function() {}30 } 最後是一些相容性處理   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.target, jQuery.event.fix( event ), true );18             };19         jQuery.event.special[ fix ] = {20             setup: function() {21                 ...22             },23             teardown: function() {24                 ...25             }    26         };27     });28 } 好了，下一回我們執行個體方法下的這些介面如何與jQuery.event,jQuery.Event協同工作。