码迷,mamicode.com
首页 > Web开发 > 详细

jQuery源码解读-事件分析

时间:2016-07-12 01:29:30      阅读:274      评论:0      收藏:0      [点我收藏+]

标签:

最原始的事件注册

    addEventListener方法大家应该都很熟悉,它是Html元素注册事件最原始的方法。先看下addEventListener方法签名:

element.addEventListener(event, function, useCapture)

    event:事件名,例如“click”,这里要提醒的一点是不要加前缀“on”;
    function:事件触发时执行的函数;
    userCapture:默认为false,表示event事件在冒泡阶段触发。如果设置为true,则事件将会在捕获阶段触发。如果不清楚什么是捕获和冒泡,请自觉了解事件的冒泡机制(友情链接:勤能补挫-简单But易错的JS&CSS问题总结)。
    虽然addEventListener包含了三个参数,但一般我们都只使用了前两个参数,下面的代码只使用了两个参数:

document.getElementById("myBtn").addEventListener("click", function() {
    alert(“我是在冒泡阶段触发的哦!”);
});  

    上面代码注册的函数会在冒泡阶段触发,如果想在捕获阶段触发,直接把第三个参数传递进去就ok了。在实现DOM元素拖拽功能时,会使用到捕获方式。

    另外,IE8以及之前的版本不支持事件按捕获形式传播,并且注册方法也没有addEventListener函数,IE为事件注册提供了attachEvent方法。和addEventListener相似,也包含有event和function参数,但不包含第三个参数。

jQuery事件注册

     jQuery的事件函数通过jQuery.fn.extend附加到jQuery对象,jQuery.fn.extend包含了jQuery的所有事件注册函数。那么jQuery到底提供了哪些事件函数?这里把这些函数分层了三类:

    (1)和事件同名的函数:jQuery几乎提供了所有DOM元素事件的同名函数,像我们经常使用的click、focus、scroll等函数。使用也很简单,例如我们要给div元素绑定click事件,可以直接写成$(“div”).click(function(){})。DOM元素的事件有很多,jQuery为每个事件都添加了同名的注册函数吗?看源码!

//循环遍历所有的dom元素事件名数组
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 ) {
    //把dom元素所有事件通过fn[事件名]的方式添加到jquery对象
    // Handle event binding
    jQuery.fn[ name ] = function( data, fn ) {
        //如果参数长度大于0,则调用on方法委托函数到name事件;如果参数长为0,则触发事件执行
        return arguments.length > 0 ?
        this.on( name, null, data, fn ) :
        this.trigger( name );
    };
});

    首先看到的是一串包含了所有DOM元素事件的字符串,通过空格把字符串分隔成数组。如果传递的参数长度大于0,则调用jQuery对象的on方法注册事件。如果参数长度为0,则直接调用trigger方法触发事件。例如(“div”).click(function())将会调用on方法注册事件,而(“div”).click()则调用trigger方法,立即触发click事件。
    上面的代码有几点需要作下解释:
    jQuery.fn中的函数包含的上下文this是指向jQuery实体,例如$(“div”)实体。
    jQuery.fn[name] = function(){}等效于jQuery.fn.name = function(){},例如jQuery.fn[“click”] = function(){}等效于jQuery.fn.click = function(){}。
    This.on和this.trigger方法这里暂不忙解释。

    (2)绑定和委托函数:bind/unbind和delegate/undelegate方法通过jQuery.fn.extend附加到jQuery对象上。代码很简单:

jQuery.fn.extend({
//事件绑定
bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
//事件解绑
unbind: function( types, fn ) {
    return this.off( types, null, fn );
},
//事件委托
delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},
//委托解绑
undelegate: function( selector, types, fn ) {
    return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
}
});

    bind和delegate都是直接调用jQuery对象的on函数,唯一区别是传递的参数不同,bind的第二个参数为null,而委托的第二个参数是一个selector。别小看这个区别,使用jQuery绑定事件常出的问题部分原因就是没搞清楚这两个参数的区别。

    (3)底层注册函数:前面介绍的和事件同名的函数、绑定和委托函数最终都是调用了jQuery对象的on函数,我们在编程的时候也可以直接使用on函数。on函数代码比较复杂,我们先看看外壳:

jQuery.fn.extend({
    //比较底层的事件委托函数,其他函数都是调用这个来和元素建立绑定或者委托
    on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
        return this.each( function() {
            jQuery.event.add( this, types, fn, data, selector );
        });
    },
    //一次性事件绑定
    one: function( types, selector, data, fn ) {
        return this.on( types, selector, data, fn, 1 );
    },
    //比较底层的事件解绑,其他解绑函数都是调用该函数执行解绑
    off: function( types, selector, fn ) {
        return this.each(function() {
            jQuery.event.remove( this, types, fn, selector );
        });
    },
    //触发事件
    trigger: function( type, data ) {
        return this.each(function() {
            jQuery.event.trigger( type, data, this );
        });
    },
    //只执行元素绑定的处理函数,不会触发浏览器的默认动作
    triggerHandler: function( type, data ) {
        var elem = this[0];
        if ( elem ) {
            return jQuery.event.trigger( type, data, elem, true );
        }
    }
});

    为什么说是底层的函数?因为前面的所有绑定最终都是调用on函数,所有的解绑最终调用off函数。这里还包含了trigger和triggerHandler函数,前一个是触发元素的所有type事件行为,而triggerHandler只触发绑定的函数而不触发行为。例如focus事件,triggerHandler只会触发绑定给元素的focus处理函数,而不会真的让元素获得焦点。但trigger函数会让元素获取焦点。

    汇总一下,jQuery提供的事件处理函数不外乎也就下面这些。

技术分享

委托还是绑定?

    这里为什么提出了委托和绑定?事出有因,我们慢慢来分析。之前介绍了几类事件绑定,先分下类便于后面的分析。以什么分类?就以调用on函数的第二个参数为不为null。

(1)为null的一类on(types, null, data, fn)事件

    bind、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。

(2)不为null的一类on(types, selector, data, fn)事件

    delegate、on

    接下来我们举一个场景:给div容器(class为parent)列表中的每一项(class为child)添加click事件,并且列表的项可动态添加。

<div class="parent">
<div class="child">第1个儿子</div>
<div class="child">第2个儿子</div>
<div class="child">第3个儿子</div>
</div>
<button id="btn">生儿子</button>
<script type="text/javascript">
    var i = 4;
    (".parent.child").click(function(){alert("我是你儿子"});
    //(".parent.child").click(function(){alert("我是你儿子"});
    //(".parent .child").bind("click", function(){
        // alert("我是你儿子");
    // })
    ("#btn").click(function(){             
        $(".parent").append("<div class=‘child‘>第" + (i++) + "个儿子</div>");         
    });    
 </script>

    页面加载后点击前三个儿子都会提示“我是你儿子”,现在我点击btn按钮,添加第四个儿子,然后再点击新增项看看。发现没有再弹出提示信息。上面代码注册事件使用的是click或者bind函数,效果都是一样:动态添加的子项没有触发事件了。其实,“为null的一类”事件效果都是这样。现在我们再把事件绑定改成delegate或者on函数:

//(".parent").on("click", ".child", function(){
    // alert("我是你儿子");
// });
$(".parent").delegate(".child", "click", function(){
    alert("我是你儿子");
});

    测试结果发现,不管是on或者delegate,我们后面动态添加的子项都能触发事件。

    通过上面的场景不难看出,click和bind函数只支持静态绑定,只能绑定给已经有的节点,后期动态生成的节点不支持。这样的行为我们可称为“绑定”。而通过delegate或者on方法通过传递一个selector,把通过selector筛选的元素的事件全权“委托”给父容器。所以事件其实是绑定在父容器上,只是在处理事件时jQuery内部做了委托处理。
    那么,到底是委托好还是绑定好?个人建议如果筛选的元素比较少,可以使用click或者bind,比较简单并且代码也容易理解。但如果筛选出的元素可能包含成百上千,那么肯定使用delegate或者on,这样性能比bind高多了。delegate、on事件只会绑定给父容器,即使1000个节点,还是只绑定一次。而bind的话就得乖乖的绑定1000次。
不管是委托还是绑定,都是通过on注册。所以搞清楚on函数的实现也就搞清楚了jQuery的事件机制。

jQuery源代码分析

    jQuery.fn.on函数

    既然绑定和委托最终都是调用on函数,那么只要把on方法代码流程了解清楚,整个事件绑定机制也了解的差不多。On函数代码其实比较简单,包含参数处理和事件添加两个部分。函数包含了5个参数:

on: function( types, selector, data, fn, /*INTERNAL*/ one )

    但是我们经常使用on函数并没有传递这么多参数,而是像这样:

(“a”).on(“click”,function());(“a”).on(“click”,function());(“a”).on(“click”, “p”, function(){});
(“a”).on(“click,mouseover,focus”,function());
(“a”).on(“click,mouseover,focus”,function());
(“”).on(“click”, {id: 1, name: “test”}, function{});

    on函数大部分代码都是处理传入的参数,最后三行代码使用each遍历jQuery对象中的元素并调用jQuery.event.add方法。源代码如下:

<DIV class=cnblogs_code 
style="BORDER-TOP: #cccccc 1px solid; BORDER-RIGHT: #cccccc 1px solid; BORDER-BOTTOM: #cccccc 1px solid; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; PADDING-LEFT: 5px; BORDER-LEFT: #cccccc 1px solid; PADDING-RIGHT: 5px; BACKGROUND-COLOR: #f5f5f5"><PRE><SPAN style="COLOR: #000000">jQuery.fn.extend({
    //比较底层的事件委托函数,其他函数都是调用这个来和元素建立绑定或者委托
    on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
        var origFn, type;
        //参数为types/handlers,("click", function)
        if ( typeof types === "object" ) {
          // ( types-Object, selector, data )。例如({‘click‘: function1,‘focus‘: function2}, selector, data)
            if ( typeof selector !== "string" ) {
                // ( types-Object, data )。例如({‘click‘: function1,‘focus‘: function2}, data)
                data = data || selector;
                selector = undefined;
            }
            //遍历{‘click‘: function1,‘focus‘: function2}
            for ( type in types ) {
            //每个type再单独调用on注册一次
            this.on( type, selector, data, types[ type ], one );
            }
            return this;
         }
        //只有两个参数,{types,fn}
        if ( data == null &amp;&amp; fn == null ) {
            // ( types, fn )
            fn = selector;
            data = selector = undefined;
        }
        //fn == null &amp;&amp; data != null,只有三个参数的情况
        else if ( fn == null ) {
            if ( typeof selector === "string" ) {
                // ( types, selector, fn ),例如:("click", "a,p", function(){})
                fn = data;
                data = undefined;
            } else {
                // ( types, data, fn ), 例如:("click", {id: 1, name: "test"}, function(e){})
                fn = data;
                data = selector;
                selector = undefined;
            }
        }
        if ( fn === false ) { //如果fn等于false,重新赋给fn一个return false的函数。
            fn = returnFalse;
        } else if ( !fn ) { //如果fn未定义或者为null,不做任何操作,直接返回链式对象this
            return this;
        }

        if ( one === 1 ) { //事件只执行一次
            origFn = fn;
            fn = function( event ) { //重写fn函数,在执行fn函数一次后,注销事件
                // Can use an empty set, since event contains the info
                jQuery().off( event );
                return origFn.apply( this, arguments );
             };
             // Use same guid so caller can remove using origFn
             fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ ); //赋值fn.guid等于原始函数origFn.guid
        }
        //jQuery对象包含的元素是一个集合,所以需要遍历每个元素执行event.add
        return this.each( function() {
            //event.add做了什么操作?
            jQuery.event.add( this, types, fn, data, selector );
            });
        }
    }

    jQuery.event对象  

    jQuery.fn.on函数最后三行代码调用了jQuery.event.add函数,add是jQuery.event的一个函数。在了解add之前先看看jQuery.event,jQuery.event究竟包含哪些东西:

jQuery.event = {
    //函数,为元素添加事件
    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 ) {},
    //属性,KeyEvent和MouseEvent事件属性
    props: "altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),
    //函数,扩展event。添加一些附加属性,像target、type、origainEvent等属性
    fix: function( event ) {},
    //对象,特殊事件
    special: {},
    //函数,模拟事件行为,例如focus、unfocus行为
    simulate: function( type, elem, event, bubble ) {}
}

    现在我们想要搞清楚的是jQuery怎样添加事件,以及如何执行事件。要了解清楚这些问题,就必须得搞清楚代码中的add、dispatch、handlers三个函数。

    为了容易理解这些函数的关系,下面是一个函数执行顺序的流程图:

技术分享

    jQuery.event.add函数

    事件是建立在DOM元素之上,DOM元素和事件要建立关系,最原始的方法是在DOM元素上绑定事件。jQuery为了不破坏DOM树结构,通过缓存的方式保存事件。jQuery内部有一个叫做Data的缓存对象,通过key/value这种方式缓存数据。细心的同学在使用jQuery时会发现DOM元素多了一个以jQuery开头的属性,例如jQuery20303812802915245450.4513941336609537:3。这个属性正是jQuery缓存的key值。
    Add函数中的elemData就是一个类型为Data的缓存对象,在调用get时需要把元素作为参数传递进去, 查找元素的属性以jQuery开始的元素句柄。例如elem[‘jQuery203038128.l..537’]这种形式。elemData需要关注另外两个属性:handle和events。
    handler就是一个调用了dispatch的匿名函数,events是一个数组,每一项是一个handleObj对象,包含type、origType、data、handler、guid、selector等属性。如果传递的types为”click focus mouseenter”,那么events数组就包含了三个handleObj对象。
另外还得调用addEventListener给委托元素注册事件,不然事件触发不了。

    总得来说,add函数干了几件事:

    如果没有为委托元素elem建立缓存,在调用get时创建缓存;
    赋予elemData.handle一个匿名函数,调用event.dispatch函数。
    往elemData.events数组添加不同事件类型的事件对象handleObj。
    给elem绑定一个types类型的事件,触发时调用elemData.handle。

add: function( elem, types, handler, data, selector ) {
    var handleObjIn, eventHandle, tmp,
    events, t, handleObj,
    special, handlers, type, namespaces, origType,
    elemData = data_priv.get( elem ); //存储事件句柄对象,elem元素的句柄对象
    
    if ( !handler.guid ) {
          handler.guid = jQuery.guid++; //创建编号,为每一个事件句柄给一个标示
    }
    
    if ( !(events = elemData.events) ) {
         events = elemData.events = {}; //events是jQuery内部维护的事件列队
    }
    if ( !(eventHandle = elemData.handle) ) { //handle是实际绑定到elem中的事件处理函数
        eventHandle = elemData.handle = function( e ) {
        jQuery.event.dispatch.apply( eventHandle.elem, arguments );
    };
    eventHandle.elem = elem;
    //事件可能是通过空格键分隔的字符串,所以将其变成字符串数组
    types = ( types || "" ).match( core_rnotwhite ) || [""];
    t = types.length;
    while ( t-- ) {
        // 这里把handleObj叫做事件处理对象,扩展一些来着handleObjIn的属性
        handleObj = jQuery.extend({
            type: type,
            origType: origType,
            data: data,
            handler: handler,
            guid: handler.guid,
            selector: selector,
            needsContext: selector && jQuery.expr.match.needsContext.test( selector ),
            namespace: namespaces.join(".")
        }, handleObjIn );
        
        // 初始化事件处理列队,如果是第一次使用,将执行语句
        if ( !(handlers = events[ type ]) ) {
            handlers = events[ type ] = [];
            handlers.delegateCount = 0;
            
            if ( elem.addEventListener ) {
                 elem.addEventListener( type, eventHandle, false );
            }
        }
    
        // 将事件处理对象推入处理列表,姑且定义为事件处理对象包
        if ( selector ) {
            handlers.splice( handlers.delegateCount++, 0, handleObj );
        } else {
            handlers.push( handleObj );
        }
        // 表示事件曾经使用过,用于事件优化
        jQuery.event.global[ type ] = true;
    }
    // 设置为null避免IE中循环引用导致的内存泄露
    elem = null;
}

    jQuery.event.dispatch函数

    委托元素触发事件时会调用dispatch函数,dispatch函数需要做的就是执行我们添加的handler函数。

    jQuery事件中的event和原生event是有区别的,做了扩展。所以代码中重新生成了一个可写的event:jQuery.event.fix(event)。包含的属性:

    delegateTarget、currentTarget、handleObj、data、preventDefault、stopPropagation。

    由于我们添加的事件函数之前保存到了缓存中,所以调用data_priv.get取出缓存。
    代码生成了一个handlerQueue队列,这里先不忙介绍jQuery.event.handlers函数。handlerQueue是一个数组,每一项是一个格式为{ elem: cur, handlers: matches }的对象。cur是DOM元素,handlers是处理函数数组。

    两个while循环:

   第一个循环遍历handlerQueue,item为{ elem: cur, handlers: matches }。
    第二个循环遍历handlers,分别执行每一个handler。

    event做了封装,我们可以在事件函数中通过event.data获取额外的信息。
    dispatch函数有判断处理函数的返回结果,如果返回结果等于false,阻止冒泡。调用preventDefault、stopPropagation终止后续事件的继续传递。

dispatch: function( event ) {
    //把event生成一个可写的对象
    event = jQuery.event.fix( event );
    
    var handlers = ( data_priv.get( this, "events" ) || {} )[ event.type ] || [];
    event.delegateTarget = this;
    handlerQueue = jQuery.event.handlers.call( this, event, handlers );
    
    i = 0;
    while ( (matched = handlerQueue[ i++ ]) && !event.isPropagationStopped() ) {
        event.currentTarget = matched.elem;
        
        j = 0;
        while ( (handleObj = matched.handlers[ j++ ]) && !event.isImmediatePropagationStopped() ) {
            if ( !event.namespace_re || event.namespace_re.test( handleObj.namespace ) ) {
                event.handleObj = handleObj;
                event.data = handleObj.data;
                ret = handleObj.handler.apply( matched.elem, args );
                if ( ret !== undefined ) {
                    if ( (event.result = ret) === false ) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                }
            }
        }
    }
    
    return event.result;
}

    jQuery.event.handler函数

    dispatch函数有调用handler函数生成一个handler队列,其实整个事件流程中最能体现委托的地方就是handler函数。
    这里有两个端点,cur = event.target(事件触发元素)和this(事件委托元素)。jQuery从cur通过parentNode 一层层往上遍历,通过selector匹配当前元素。
    每一个cur元素都会遍历一次handlers。handlers的项是一个handleObj对象,包含selector属性。通过jQuery( sel, this ).index( cur )判断当前元素是否匹配,匹配成功就加到matches数组。
    handlers遍历完后,如果matches数组有值,就把当前元素cur和matches作为一个对象附加到handlerQueue中。
一个委托元素可能包含委托和普通事件(直接绑定的事件),目前我们只根据delegateCount遍历了委托事件,所以最后还得通过handlers.slice( delegateCount )把后面的普通事件添加到队列中。

    什么是委托事件和普通事件?

    (“div”).on(“click”,“a,p”,function)这种形式添加的function是div的委托事件;而像(“div”).on(“click”, function)形式添加的事件就是div元素的一个普通事件。handlers数组中delegateCount之前的都是委托事件,之后的是普通事件。

handlers: function( event, handlers ) {
    var handlerQueue = [],
    delegateCount = handlers.delegateCount,
    cur = event.target;
    //向上遍历DOM元素
    for ( ; cur !== this; cur = cur.parentNode || this ) {
        if ( cur.disabled !== true || event.type !== "click" ) {
            matches = [];
            for ( i = 0; i < delegateCount; i++ ) {
                handleObj = handlers[ i ];
                //获取handler的selector
                sel = handleObj.selector + " ";
                
                if ( matches[ sel ] === undefined ) {
                    matches[ sel ] = handleObj.needsContext ?
                    //查看通过selector筛选的元素是否包含cur
                    jQuery( sel, this ).index( cur ) >= 0 :
                    jQuery.find( sel, this, null, [ cur ] ).length;
                }
                //如果元素匹配成功,则把handleObj添加到matches数组。
                if ( matches[ sel ] ) {
                    matches.push( handleObj );
                }
            }
            //如果matches数组长度大于0,附加cur和matches到队列中
            if ( matches.length ) {
                handlerQueue.push({ elem: cur, handlers: matches });
            }
        }
    }
    
    if ( delegateCount < handlers.length ) {
        //表示还有为委托事件函数,也要附加到队列中
        handlerQueue.push({ elem: this, handlers: handlers.slice( delegateCount ) });
    }
    
    return handlerQueue;
}

   如果本篇内容对大家有帮助,请点击页面右下角的关注。如果觉得不好,也欢迎拍砖。你们的评价就是博主的动力!下篇内容,敬请期待!

jQuery源码解读-事件分析

标签:

原文地址:http://www.cnblogs.com/w-wanglei/p/5662067.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!