jquery-事件-on源码

谈一下Jquery中的bind(),live(),delegate(),on()的区别？

1.bind()

.bind()直接绑定在相应的DOM元素上，可以解决跨浏览器的问题。
但是对于动态添加的属于匹配到的元素，不会被触发事件的，需要多次绑定，影响效率。

$("#niu").bind('click',function(){
  alert("hello niuniu");
});

2.live()

live()通过冒泡的方式来绑定到元素上的,对于动态添加的属于匹配到的元素，也能够执行。
但是event.stopPropagation()不再有效了，因为事件已经委托到了document上了。此方法在jQuery1.7的时候已经废除

$("a").live("click", function() { return false; })

3.delegate()

.delegate()则是通过冒泡的方式来绑定事件到制定元素上(但不是冒泡到document),对后生成的元素也可以绑定相应的事件。

delegate(selector,[type],[data],fn)

$(document).ready(function(){
    $("div").delegate("p","click",function(){
        $(this).slideToggle();
    });
    $("button").click(function(){
        $("<p>这是一个新段落</p>").insertAfter("button");
    });
});

4.on()

.on() 方法在被选元素及子元素上添加一个或多个事件处理程序

$(selector).on(event,childSelector,data,function,map)

event:必需。规定要从被选元素移除的一个或多个事件或命名空间。

childSelector:可选。规定只能添加到指定的子元素上的事件处理程序

data:可选。规定传递到函数的额外数据。

function:可选。规定当事件发生时运行的函数。

map:规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

// Bind
$( "#members li a" ).on( "click", function( e ) {} );
$( "#members li a" ).bind( "click", function( e ) {} );

// Live
$( document ).on( "click", "#members li a", function( e ) {} );
$( "#members li a" ).live( "click", function( e ) {} );

// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} );
$( "#members" ).delegate( "li a", "click", function( e ) {} );
//多个事件
$(document).ready(function(){
  $("p").on("mouseover mouseout",function(){
    $("p").toggleClass("intro");
  });
});
//使用map参数添加多个事件处理程序
$(document).ready(function(){
  $("p").on({
    mouseover:function(){$("body").css("background-color","lightgray");},  
    mouseout:function(){$("body").css("background-color","lightblue");},
    click:function(){$("body").css("background-color","yellow");}  
  });
});

$("table.planning_grid").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    click: function() {
        // Handle click...
    }
}, "td");

总结：
1.bind()直接绑定在元素上，当元素很多时，会出现效率问题，不会绑定到在它执行完后动态添加的那些元素上

2.live()仅有一次的事件绑定，绑定到document上而不像.bind()那样给所有的元素挨个绑定,那些动态添加的elements依然可以触发

3.delegate()更精确的小范围使用事件代理，性能优于.live()，它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.

4.on()是 bind()、live() 和 delegate() 方法的新的替代品,提供了一种统一绑定事件的方法
仍然提供了.delegate()的优点，当然如果需要你也可以直接用.bind()

5.on源码解析

首先，判断events是否为对象，若是对象则遍历events对象，针对每一个属性绑定on()方法，将events[event]作为fn传入。然后on方法其实就是对于每一个调用对象单独调用jQuery.event.add方法进行事件绑定。另外，bind，live，delegate都是通过on实现的。

on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
    var type, origFn;

    // Types can be a map of types/handlers
    if ( typeof types === "object" ) {
        // ( types-Object, selector, data )
        if ( typeof selector !== "string" ) {
            // ( types-Object, data )
            data = data || selector;
            selector = undefined;
        }
        // 遍历types对象，针对每一个属性绑定on()方法
        // 将types[type]作为fn传入
        for ( type in types ) {
            this.on( type, selector, data, types[ type ], one );
        }
        return this;
    }

    // 参数修正
    // jQuery这种参数修正的方法很好
    // 可以兼容多种参数形式
    // 可见在灵活调用的背后做了很多处理
    if ( data == null && fn == null ) {
        // ( types, fn )
        fn = selector;
        data = selector = undefined;
    } else if ( fn == null ) {
        if ( typeof selector === "string" ) {
            // ( types, selector, fn )
            fn = data;
            data = undefined;
        } else {
            // ( types, data, fn )
            fn = data;
            data = selector;
            selector = undefined;
        }
    }
    if ( fn === false ) {
        // fn传入false时，阻止该事件的默认行为
        // function returnFalse() {return false;}
        fn = returnFalse;
    } else if ( !fn ) {
        return this;
    }

    // one()调用on()
    if ( one === 1 ) {
        origFn = fn;
        fn = function( event ) {
            // Can use an empty set, since event contains the info
            // 用一个空jQuery对象，这样可以使用.off方法，
            // 并且event带有remove事件需要的信息
            jQuery().off( event );
            return origFn.apply( this, arguments );
        };
        // Use same guid so caller can remove using origFn
        // 事件删除依赖于guid
        fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
    }

    // 这里调用jQuery的each方法遍历调用on()方法的jQuery对象
    // 如$('li').on(...)则遍历每一个li传入add()
    // 推荐使用$(document).on()或者集合元素的父元素
    return this.each( function() {
        jQuery.event.add( this, types, fn, data, selector );
    });
},