淺談jQuery事件綁定原理

2019-11-20 13:31:25

字體：大中小

來源：轉載

供稿：網友

jq里面有一個data的方法,給dom元素綁定相關的數據的。當給dom用jq的方法綁定了事件,會生成對應的時間列表
可以看下面的例子(請在firefox中查看因為firefox中對象支持toSource())

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src=">
<script type="text/javascript">
    window.onload = function(){
        alert($.data($('#test')[0],'events'));//null
        alert($.data($('#test')[0],'handle'));//null
        $('#test')
        .bind('click',function(){
            alert(1)
        })
        .bind('mouseover',function(){
            alert(2)
        })
        .bind('click',function(){
            alert(3)
        })
        .bind('click',function(){
            alert(4)
        })
        alert($.data($('#test')[0],'events').toSource());//時間列表
        alert($.data($('#test')[0],'handle').toSource());//執行的函數
    }
</script>
</body>
</html>

data是給元素綁定數據的
數據源是 cache對象
當元素綁定數據的時候會給元素添加一個屬性 jQueryxxx xxx為執行jq的時間戳
這里要說明一下,有一個uuid 他是累加的
jQueryxxx的值就是這個uuid
cache 的 key就是這個 uuid
value就是要存的數據
data對于事件的綁定是很重要的................................

復制代碼代碼如下:

win.each = function( object, callback, args ) {
    var name, i = 0, length = object.length;
    if ( args ) {
        if ( length === undefined ) {
            for ( name in object )
                if ( callback.apply( object[ name ], args ) === false )
                    break;
        } else
            for ( ; i < length; )
                if ( callback.apply( object[ i++ ], args ) === false )
                    break;
    } else {
        if ( length === undefined ) {
            for ( name in object )
                if ( callback.call( object[ name ], name, object[ name ] ) === false )
                    break;
        } else
            for ( var value = object[0];
                i < length && callback.call( value, i, value ) !== false; value = object[++i] ){}
    }
    return object;
}

接著實現添加事件

jq里面是在 jQuery.event里面的add方法
在add方法里面實現了一下一些功能
取元素的events,handle這2個data綁定的數據
events存放的是事件列表
格式如下
{
click: [{handler:function(){},type:"click",guid:'xx'}.......],
mouse:[......]
}
handle是執行的函數
(所有的執行函數都是一樣的他們遍歷事件列表執行對應的事件)
然后遍歷types 因為可以綁定多個事件
回調函數也會給幾個屬性
假設回調函數是handler
handler.guid = gevent.guid++
handler.type = name
name應該算一個特殊的命名方便刪除用的
比如
$('#xx')
.bind('click',function(){})
.bind('click.d',handler)
name就是d了
刪除的時候可以只刪除d那個事件不刪除上面的那個 click事件

最后是給元素綁定事件但是執行的函數都是
function(){
gevent.handle.apply(arguments.callee.elem, arguments);
});

復制代碼代碼如下:

win.gevent = {
    guid : 1,
    add  : function (elem, types, handler){
        if ( elem.nodeType == 3 || elem.nodeType == 8 )
            return;
        if ( elem.setInterval && elem != window )
            elem = window;
        //給函數一個唯一標識的索引  方便后面刪除該事件    
        if ( !handler.guid )
            handler.guid = this.guid++;
        //獲得該元素的events handle 下的數據    
        var events = data(elem, "events") || data(elem, "events", {}),
            handle =data(elem, "handle") || data(elem, "handle", function(){
                //gevent.handle才是各種行為觸發后會執行的函數
                gevent.handle.apply(arguments.callee.elem, arguments);
            });
        handle.elem = elem;
        //遍歷事件名 因為可以是 click mouseover 
        each(types.split(//s+/), function(index, type) {
            var namespaces = type.split(".");
            //獲得事件名
            type = namespaces.shift();
            //去掉點后面的東西 是個特殊的命名  在刪除的時候可以指定刪除他  如 click.d
            //用事件的type 記錄住這個特殊的命名
            handler.type = namespaces.slice().sort().join(".");
            //獲得該事件是否已經存在events 這個對象里面了
            var handlers = events[type];
            //如果不存在該事件 給元素綁定該事件                
            if (!handlers) {
                handlers = events[type] = {};
                if (elem.addEventListener)
                    elem.addEventListener(type, handle, false);
                else if (elem.attachEvent)
                    elem.attachEvent("on" + type, handle);                                        
            }
            //吧函數放到元素的該事件的列表里面
            handlers[handler.guid] = handler;                                        
        });
        elem = null;                                                    
    }
}

gevent.hander是綁定事件真正執行的函數
在gevent.hander里面也有取.特殊命名的地方但是不知道做什么用的
hander里面先對event進行包裝
包裝見gevent. fix 和 setEvent
主要是對做一個原生event的一個copy 然后把不兼容的方法都合成兼容的寫法
然后取元素的events (事件列表)
然后遍歷這個事件列表判斷type是不是事件列表的key 是的話就執行事件
在執行列表函數的時候會判斷返回值
如果返回false 還可以組織事件冒泡和默認行為

復制代碼代碼如下:

win.gevent = {
    handle : function(event){
        var all, handlers;
        //包裝event
        event = arguments[0] = gevent.fix( event || window.event );
        event.currentTarget = this;
        //這里的........
        var namespaces = event.type.split(".");
        event.type = namespaces.shift();
        all = !namespaces.length;
        var namespace = RegExp("(^|//.)" + namespaces.slice().sort().join(".*//.") + "(//.|$)");
        //取這個元素的該行為的事件列表
        handlers = (data(this, "events") || {} )[event.type];
        //遍歷這個事件列表執行該執行的東西
        for ( var j in handlers ) {
            var handler = handlers[j];
            if ( all || namespace.test(handler.type) ) {
                // Pass in a reference to the handler function itself
                // So that we can later remove it
                // jq上的注釋是是這么寫的把event的handler 引用這個事件方便之后移除
                // 但是在remove里面并沒有用到event的handler 不知道這里到底有什么用且有多個事件的時候這個事件被取代
                event.handler = handler;
                //執行事件并且是用元素調用的事件可以吧事件里面的this執行元素 ret為函數的返回值
                var ret = handler.apply(this, arguments);
                //如果有返回值且返回值是false 執行阻止事件冒泡阻止執行事件默認行為
                if( ret !== undefined ){
                    event.result = ret;
                    if ( ret === false ) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                }
            }
        }
    },
    props: "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode metaKey newValue originalTarget pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),
    fix : function(event){
        //new setEvent會給event給以個expando屬性如果有中個屬性說明已經生成了event了不需要在次對event進行包裝
        if ( event[expando] )
            return event;
        //保留一個原始的event
        // new一個新的event 這個與原始的event是不同的
        var originalEvent = event;
        event = new setEvent( originalEvent );
        //獲得原始event的屬性值有哪些屬性值見 this.props
        for ( var i = this.props.length, prop; i; ){
            prop = this.props[ --i ];
            event[ prop ] = originalEvent[ prop ];
        }
        //將目標元素同一成event.target
        if ( !event.target )
            event.target = event.srcElement || document; // Fixes #1925 where srcElement might not be defined either
        //如果發現是文本節點取他的父節點
        if ( event.target.nodeType == 3 )
            event.target = event.target.parentNode;

        if ( !event.relatedTarget && event.fromElement )
            event.relatedTarget = event.fromElement == event.target ? event.toElement : event.fromElement;
        return event;
    }
}
win.setEvent = function(src){
    // Allow instantiation without the 'new' keyword
    // Event object
    if( src && src.type ){
        this.originalEvent = src;
        this.type = src.type;
    // 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 = now();
    // Mark it as fixed
    this[expando] = true;
}
function returnFalse(){
    return false;
}
function returnTrue(){
return true;
}
setEvent.prototype = {
preventDefault: function() {
     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)
     e.returnValue = false;
},
stopPropagation: function() {
     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();
},
isImmediatePropagationStopped: returnFalse
};

一個完整的例子

復制代碼代碼如下: