html5 点击事件委托,jquery事件委托

一，.on( events [, selector ] [, data ], handler(eventObject) )// .on( events [, selector ] [, data ] )

该方法取代了jQuery 之前的 .bind(), .delegate(), 和 .live()  方法，

.on() 可以直接进行事件绑定也可以进行时间委托

live方法 进行的事件委托是绑定在 document 上，  通过 event.target  和  event.type  判断元素

.live( events, handler(eventObject) )       // jQuery 1.3+

举例：

$("#trigger").live("click", function(){ alert("Goodbye!"); });

delegate方法进行事件委托是绑定在父元素上，执行速度要比live 快

$(document).delegate("#trigger", "click", function(){ alert("Goodbye!"); });

on方法进行事件委托也是绑定在父元素上，只是为了兼容，第一个参数是事件类型， 第二个参数选择器，第三个是data ，第四个参数是回调函数，

$(document).on("click", "#trigger", function(){ alert("Goodbye!"); });

on 方法的其他用法直接绑定事件

$("#trigger").on("click", function(){  //  单事件绑定

alert( $(this).text() );

});

$( "#trigger" ).on({                //  多事件绑定

click: function() {

$( this ).toggleClass( "active" );

},

mouseenter: function() {

$( this ).addClass( "inside" );

},

mouseleave: function() {

$( this ).removeClass( "inside" );

}

});

$("#trigger").on("click.myclick", function(){  //  命名空间

alert( $(this).text() );

});

2.   取消表单提交动作

$("form").on("submit", false)；

等于

$("form").on("submit", function(event) {

event.preventDefault();

});

阻止提交事件的冒泡行为

$("form").on("submit", function(event) {

event.stopPropagation();

});

3.传递一个data数据给.trigger()的事件处理程序，作为第二个参数。

$( "div" ).on( "click", function( event, person ) {   //(传递的一个data数据，此数据是一个对象)

alert( "Hello, " + person.name );

});

$( "div" ).trigger( "click", { name: "Jim" } );

$( "div" ).on( "click", function( event, salutation, name ) {  //(传递的多个data数据，此数据是数组形式传入)

alert( salutation + ", " + name );

});

$( "div" ).trigger( "click", [ "Goodbye", "Jim" ] );

4.  向事件处理函数中传入数据，并且在事件处理函数中通过名字来获取传入的数据：

$("p").on("click", {foo: "bar"}, function(event){

alert(event.data.foo);

})；

二，.off( events [, selector ] [, handler ] )  //  on 方法对应移除事件处理函数。

.off( events [, selector ] [, handler ] )            //

events

类型: String

一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"。

selector

类型: String

一个选择器，当绑定事件处理程序时匹配最初传递给 .on()的那个。

handler

类型: Function( Event eventObject )

以前附加的事件处理函数，或特殊值false。

$("body").on("click", "p", foo)；

$("body").off("click", "p", foo);

.off( events [, selector ] )$("body").off("click", "p");

.off( event )$("p").off( "click", "**" )

.off()$("p").off( )