javascript事件之：jQuery事件接口概述

　　事件的操作，在JavaScript是非常频繁的。然而原生javaScript的事件API让新手感觉非常不友好，再加上事件依赖于DOM，而原生javaScript对DOM的选择又是三板斧的功力。由此催生出以jQuery为领头羊的对原生js事件操作的兼容性处理，API优化以及一些功能的拓展。

　　现在，以jQuery2.0.3为例，我们来看看jQuery的事件接口。

　　首先来看拓展到jQuery.prototype下的实例方法：

//5049 - 5150
1 jQuery.fn.extend({
    on: function( types, selector, data, fn, /*INTERNAL*/ one ) { ... },
    one: function( types, selector, data, fn ) { ... },
    off: function( types, selector, fn ) { ... }),
    trigger: function( type, data ) { ... },
    triggerHandler: function( type, data ) { ... }
})

//6742-6773
//提供的一些便捷方法
 1 jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {

    // Handle event binding
    jQuery.fn[ name ] = function( data, fn ) {
        return arguments.length > 0 ?
            this.on( name, null, data, fn ) :
            this.trigger( name );
    };
});
jQuery.fn.extend({
    hover: function( fnOver, fnOut ) { ... },
    bind: function( types, data, fn ) { ... },
    unbind: function( types, fn ) { ... },
    delegate: function( selector, types, data, fn ) { ... },
    undelegate: function( selector, types, fn ) { ... }
})

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拓展方法。

拓展方法

jQuery.event = {
    global: {},
    add: function( elem, types, handler, data, selector ) {},
    remove: function( elem, types, handler, selector, mappedTypes ) {},
    trigger: function( event, data, elem, onlyHandlers ) {},
    dispatch: function( event ) {},
    handlers: function( event, handlers ) {},
    props: "altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),
    fixHooks: {},
    keyHooks: {
        props: "char charCode key keyCode".split(" "),
        filter: function( event, original ) {}
    },
    mouseHooks: {
        props: "button buttons clientX clientY offsetX offsetY pageX pageY screenX screenY toElement".split(" "),
        filter: function( event, original ) {}
    },
    fix: function( event ) {},
    special: {},
    simulate: function( type, elem, event, bubble ) {}
}
jQuery.Event = function( src, props ) {}
jQuery.Event.prototype = {
    isDefaultPrevented: returnFalse,
    isPropagationStopped: returnFalse,
    isImmediatePropagationStopped: returnFalse,
    preventDefault: function() {},
    stopPropagation: function() {},
    stopImmediatePropagation: function() {}
}

最后是一些兼容性处理

jQuery.each({
    mouseenter: "mouseover",
    mouseleave: "mouseout"
}, function( orig, fix ) {
    jQuery.event.special[ orig ] = {
        delegateType: fix,
        bindType: fix,
        handle: function( event ) {
            ...
        }
    };
});

if ( !jQuery.support.focusinBubbles ) {
    jQuery.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 ] = {
            setup: function() {
                ...
            },
            teardown: function() {
                ...
            }    
        };
    });
}

好了，下一回我们实例方法下的这些接口如何与jQuery.event,jQuery.Event协同工作。