浅谈jQuery事件绑定原理

2020-05-22 17:11:35易采站长站整理

        } 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;