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协同工作。