是因为各个浏览器中原生事件目标的 差异性 ,多数 JS库/框架
都或多还是丢失之对原生事件目标开展了修复和包裹。

照,停止事件冒泡IE用 cancelBubble ,标准浏览器虽然据此 stopPropagation

赢得事件源对象,IE用 srcElement ,标准浏览器虽然因此 target 诸如此类。

jQuery 对原生事件目标的修补与打包主要采取 jQuery.Event 类和
jQuery.event.fix 方法。

jQuery.Event = function( src ) {
    // Allow instantiation without the 'new' keyword
    if ( !this.preventDefault ) {
        return new jQuery.Event( src );
    }

    // Event object
    if ( src && src.type ) {
        this.originalEvent = src;
        this.type = src.type;

        // Events bubbling up the document may have been marked as prevented
        // by a handler lower down the tree; reflect the correct value.
        this.isDefaultPrevented = (src.defaultPrevented || src.returnValue === false ||
            src.getPreventDefault && src.getPreventDefault()) ? returnTrue : returnFalse;

    // Event type
    } else {
        this.type = src;
    }

    // timeStamp is buggy for some events on Firefox(#3843)
    // So we won't rely on the native value
    this.timeStamp = jQuery.now();

    // Mark it as fixed
    this[ jQuery.expando ] = true;
};

function returnFalse() {
    return false;
}
function returnTrue() {
    return true;
}

// jQuery.Event is based on DOM3 Events as specified by the ECMAScript Language Binding
// http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
jQuery.Event.prototype = {
    preventDefault: function() {
        this.isDefaultPrevented = returnTrue;

        var e = this.originalEvent;
        if ( !e ) {
            return;
        }

        // if preventDefault exists run it on the original event
        if ( e.preventDefault ) {
            e.preventDefault();

        // otherwise set the returnValue property of the original event to false (IE)
        } else {
            e.returnValue = false;
        }
    },
    stopPropagation: function() {
        this.isPropagationStopped = returnTrue;

        var e = this.originalEvent;
        if ( !e ) {
            return;
        }
        // if stopPropagation exists run it on the original event
        if ( e.stopPropagation ) {
            e.stopPropagation();
        }
        // otherwise set the cancelBubble property of the original event to true (IE)
        e.cancelBubble = true;
    },
    stopImmediatePropagation: function() {
        this.isImmediatePropagationStopped = returnTrue;
        this.stopPropagation();
    },
    isDefaultPrevented: returnFalse,
    isPropagationStopped: returnFalse,
    isImmediatePropagationStopped: returnFalse
};

 

jQuery.Event 类主要做了以下工作

  1. 推而广之了 originalEvent 属性,该属性暂存了原生事件目标
  2. 修复了
    timeStamp
    ,该属性IE6/7/8勿支持,其它支持之一一浏览器中返回值也殊
  3. 截留DOM元素默认行为统一行使 preventDefault
  4. 终止事件冒泡统一用 stopPropagation
  5. 实现或扩展了
    DOM3事件
    的几乎个措施:stopImmediatePropagation、isDefaultPrevented、isPropagationStopped、isImmediatePropagationStopped

除此以外,jQuery.Event的 写类方式 也正如新鲜。它
下藏的new创建对象

 

jQuery.event.fix方法 如下

fix: function( event ) {
    if ( event[ jQuery.expando ] ) {
        return event;
    }

    // store a copy of the original event object
    // and "clone" to set read-only properties
    var originalEvent = event;
    event = jQuery.Event( originalEvent );

    for ( var i = this.props.length, prop; i; ) {
        prop = this.props[ --i ];
        event[ prop ] = originalEvent[ prop ];
    }

    // Fix target property, if necessary
    if ( !event.target ) {
        // Fixes #1925 where srcElement might not be defined either
        event.target = event.srcElement || document;
    }

    // check if target is a textnode (safari)
    if ( event.target.nodeType === 3 ) {
        event.target = event.target.parentNode;
    }

    // Add relatedTarget, if necessary
    if ( !event.relatedTarget && event.fromElement ) {
        event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
    }

    // Calculate pageX/Y if missing and clientX/Y available
    if ( event.pageX == null && event.clientX != null ) {
        var doc = document.documentElement,
            body = document.body;

        event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
        event.pageY = event.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);
    }

    // Add which for key events
    if ( event.which == null && (event.charCode != null || event.keyCode != null) ) {
        event.which = event.charCode != null ? event.charCode : event.keyCode;
    }

    // Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs)
    if ( !event.metaKey && event.ctrlKey ) {
        event.metaKey = event.ctrlKey;
    }

    // Add which for click: 1 === left; 2 === middle; 3 === right
    // Note: button is not normalized, so don't use it
    if ( !event.which && event.button !== undefined ) {
        event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
    }

    return event;
},

 

其至关重要做了以下工作

  1. event = jQuery.Event( originalEvent );
    该词创建了一个jQuery.Event类的实例对象,该目标修复和扩充上面刚刚提到了。
  2. 一个巡回将原生事件目标的富有属性拷贝给 1 中之event对象。

    for ( var i = this.props.length, prop; i; ) {

     prop = this.props[ --i ];
     event[ prop ] = originalEvent[ prop ];
    

    }

  3. 集合事件源对象呢 target 。

  4. 联合事件相关对象啊 relativeTarget 。
  5. 扩张了pageX , pageY
    ,这点儿单特性首软当Firefox中引入的。不支持该属性的浏览器采用clientX/Y计算得到。
  6. 扩充了 which
    ,使用她拿走键盘按键值(keyCode)。这个特性为是当Firefox引入的。
  7. 修复了metaKey。
  8. 推而广之了which,使用它获鼠标按键值

周密之总人口唯恐注意到了,jQuery获取键盘按键值和鼠标按键值都是用which。它从未为外性质一样去兼容W3C已生业内
(button )。这无异碰自己于
读jQuery之七

各浏览器被鼠标按键值的区别
做了详细分析。

 

末尾,给z.js添加包装事件目标的连锁代码。

 

相关:

动用藏的new创建对象

读jQuery之七

各浏览器被鼠标按键值的反差

事件目标差异性列表 

z.js

 

相关文章

网站地图xml地图