jQuery学习-事件之绑定事件(五)

大家应该还记得dispatch方法中有这么一段代码:

event = jQuery.event.fix( event );

event的修复是在fix这个方法中的,而在fix中是通过 new jQuery.Event( originalEvent )来重新构建event对象的,

同时还修复了一些属性值,请看

fix: function( event ) {
        if ( event[ jQuery.expando ] ) {//如果event已经被修正则直接返回
            return event;
        }

// Create a writable copy of the event object and normalize some properties
        var i, prop, copy,
            type = event.type,
            originalEvent = event,
            fixHook = this.fixHooks[ type ];
        /*
         获取需从原生event对象获取的属性值
         fixHooks中看看有没有对应事件类型的修正
         如果没有,则从mouseHooks或者是keyhooks中取,如果都没有就设置为空对象
         * */
        if ( !fixHook ) {
            this.fixHooks[ type ] = fixHook =
                rmouseEvent.test( type ) ? this.mouseHooks :
                rkeyEvent.test( type ) ? this.keyHooks :
                {};
        }
                //需要复制的属性key数组
        copy = fixHook.props ? this.props.concat( fixHook.props ) : this.props;

event = new jQuery.Event( originalEvent );//新建jQuery的event对象

/*
         从原生event对象赋值属性到新event对象
         * */
        i = copy.length;
        while ( i-- ) {
            prop = copy[ i ];
            event[ prop ] = originalEvent[ prop ];
        }

// Support: IE<9
        // Fix target property (#1925)
        //修正event.target
        if ( !event.target ) {
            event.target = originalEvent.srcElement || document;
        }

// Support: Chrome 23+, Safari?
        // Target should not be a text node (#504, #13143)
        /*
         如果event.target为文本节点则target指向其父节点
         * */
        if ( event.target.nodeType === 3 ) {
            event.target = event.target.parentNode;
        }

// Support: IE<9
        // For mouse/key events, metaKey==false if it‘s undefined (#3368, #11328)
        /*
         * 如果.metaKey == undefined 则返回false
         * 这是以一种巧妙的写法
         * !!undefined ==> false
         * !!null ==> false
         * !!"" ==> false
         * !!"a" ==> true
        */
        event.metaKey = !!event.metaKey;

return fixHook.filter ? fixHook.filter( event, originalEvent ) : event;
    },
        mouseHooks: {
        props: "button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),
        filter: function( event, original ) {
            var body, eventDoc, doc,
                button = original.button,
                fromElement = original.fromElement;

// Calculate pageX/Y if missing and clientX/Y available
            /*
             修正pageX,pageY属性值
             * */
            if ( event.pageX == null && original.clientX != null ) {
                eventDoc = event.target.ownerDocument || document;
                doc = eventDoc.documentElement;
                body = eventDoc.body;

event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 );
                event.pageY = original.clientY + ( doc && doc.scrollTop  || body && body.scrollTop  || 0 ) - ( doc && doc.clientTop  || body && body.clientTop  || 0 );
            }
            /*
             修正relatedTarget
             该值为触发事件时的来源元素
             * */
            // Add relatedTarget, if necessary
            if ( !event.relatedTarget && fromElement ) {
                event.relatedTarget = fromElement === event.target ? original.toElement : fromElement;
            }

// Add which for click: 1 === left; 2 === middle; 3 === right
            // Note: button is not normalized, so don‘t use it
            /*
             修正which属性,鼠标左键,右键,中键
             chrome:1 === left; 2 === middle; 3 === right
             ie没有which只有button
                     1 === left === (button == 1); 2 === middle === (button == 4); 3 === right === (button == 2)
             * */
            if ( !event.which && button !== undefined ) {
                event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) );
            }

return event;
        }

},

今天有些焦躁,唉!

时间: 2024-11-10 20:32:44

jQuery学习-事件之绑定事件(五)的相关文章

jQuery学习-事件之绑定事件(三)

在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event, handlers ) {         var sel, handleObj, matches, i,             handlerQueue = [],             delegateCount = handlers.delegateCount,             cur =

jQuery学习-事件之绑定事件(二)

在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) { //这里是修正event对象的属性,处理兼容性问题         event = jQuery.event.fix( event ); var i, ret, handleObj, matched, j,             handlerQueue = [],//事件队列             arg

jQuery学习-事件之绑定事件(一)

我们都知道jQuery的事件其思想来源于Dean Edwards的addEvent,通过源码我们知道jQuery在为元素绑定事件时,每种类型的事件(click,blur)时只绑定了一次对应类型的事件处理方法,实际的方法是存在jQuery的缓存系统中的,这样做的好处我就不多说了,绑定方法的函数为add方法,在执行事件的时,通过handers在缓存系统中获取事件列表,然后通过dispatch函数来执行对应的事件. jQuery.event = { add: function( elem, types

jQuery学习-事件之绑定事件(七)

今天来说说事件中的handlers方法中的一个片段 1 matches[ sel ] = handleObj.needsContext ?  2     jQuery( sel, this ).index( cur ) >= 0 :  3     jQuery.find( sel, this, null, [ cur ] ).length;  4 /*  5  这是handler是方法中过滤委托的方法.等价于  6 if(handleObj.needsContext){  7     match

jquery事件与绑定事件

1.首先,我们来看一下经常使用的添加事件的方式: <input type="button" id="btn" value="click me!" onclick="shao();" /> <script type="text/javascript"> function shao() { alert("msg is showing!"); } </script

[jquery]高级篇--js绑定事件

参考:  http://www.cnblogs.com/leejersey/p/3545372.html jQuery on()方法是官方推荐的绑定事件的一个方法.$(selector).on(event,childSelector,data,function,map)由此扩展开来的几个以前常见的方法有.bind() 1 $("p").bind("click",function(){ 2 alert("The paragraph was clicked.&

学习指js绑定事件

由于ie中绑定事件的bug,所以产生了用原生的实践操作来模拟事件绑定的方法,跟着李炎恢学的一招. function addEvent(obj, type, fn){ if(obj.addEventListener){ obj.addEventListener(type, fn, false); }else{ if(!obj.events) obj.events = {}: if(!obj.events[type]) {   obj.events[type] = []; if(obj['on'+

jquery 给一个节点绑定事件总结

//给输入框绑定事件   key = $("#key");   key.bind("focus", focusKey).bind("blur", blurKey).bind("change cut input propertychange", searchNode);   key.bind('keydown', function (e){if(e.which == 13){searchNode();}});      setT

Arc gis api for js 学习随笔之绑定事件鼠标动作

1 var map; 2 require(["esri/map", "dojo/domReady!"], function(Map) { 3 map = new Map("GHL", { 4 5 zoom: 3, 6 basemap: "topo", 7 logo:false, 8 9 10 }); 11 dojo.connect(map,"onMouseMove",function(e){ 12 var

jquery移除事件,绑定事件,触发事件

$('.gcddfadf-btn-pay').unbind('click');//移除绑定事件 $('.gcddfadf-btn-pay').bind('click',function(){});//绑定事件$('.gcddfadf-btn-pay').trigger('click');//触发事件 触发自定义事件bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. $('#btn').bind("myclick",function(){....});