移除on()所绑定的方法,可以使用off()方法处理
1 2 3 4 5 6 7 8 $(document ).ready (function ( ){ $("p" ).on ("click" ,function ( ){ $(this ).css ("background-color" ,"pink" ); }); $("button" ).click (function ( ){ $("p" ).off ("click" ); }); });
事件只需要一次的操作,可以使用one()这个方法
1 2 3 4 5 $(document ).ready (function ( ){ $("p" ).one ("click" ,function ( ){ $(this ).animate ({fontSize :"+=6px" }); }); });
trigger()绑定
1 2 3 4 5 6 7 8 9 $(selector).trigger (event,eventObj,param1,param2,...) $(document ).ready (function ( ){ $("input" ).select (function ( ){ $("input" ).after (" Text marked!" ); }); $("button" ).click (function ( ){ $("input" ).trigger ("select" ); }); });
多个事件绑定同一个函数
1 2 3 4 5 $(document ).ready (function ( ){ $("p" ).on ("mouseover mouseout" ,function ( ){ $("p" ).toggleClass ("intro" ); }); });
多个事件绑定不同函数
1 2 3 4 5 6 7 $(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" );}}); });
绑定自定义事件
1 2 3 4 5 6 7 8 $(document ).ready (function ( ){ $("p" ).on ("myOwnEvent" , function (event, showName ){ $(this ).text (showName + "! What a beautiful name!" ).show (); }); $("button" ).click (function ( ){ $("p" ).trigger ("myOwnEvent" ,["Anja" ]); }); });
传递数据到函数
1 2 3 4 5 6 7 function handlerName (event ){ alert (event.data .msg );} $(document ).ready (function ( ){ $("p" ).on ("click" , {msg : "You just clicked me!" }, handlerName) });
适用于未创建的元素
1 2 3 4 5 6 7 8 $(document ).ready (function ( ){ $("div" ).on ("click" ,"p" ,function ( ){ $(this ).slideToggle (); }); $("button" ).click (function ( ){ $("<p>This is a new paragraph.</p>" ).insertAfter ("button" ); }); });