一,.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 ] ) //
$("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( )
events
类型: String
一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", "keydown.myPlugin", 或者 ".myPlugin"。
selector
类型: String
一个选择器,当绑定事件处理程序时匹配最初传递给 .on()的那个。
handler
类型: Function( Event eventObject )
以前附加的事件处理函数,或特殊值false。
-
canvas API
:下一篇 »