API上jquery on介紹
on(events,[selector],[data],fn)
概述
在選擇元素上綁定一個或多個事件的事件處理函數。
on()方法綁定事件處理程序到當前選定的jQuery對象中的元素。在jQuery 1.7中，.on()方法 提供綁定事件處理程序所需的所有功能。幫助從舊的jQuery事件方法轉換，see .bind(), .delegate(), 和 .live(). 要刪除的.on()綁定的事件，請參閱.off()。要附加一個事件，只運行一次，然后刪除自己， 請參閱.one()
參數
events,[selector],[data],fnV1.7
events:一個或多個用空格分隔的事件類型和可選的命名空間，如"click"或"keydown.myPlugin" 。
selector:一個選擇器字符串用於過濾器的觸發事件的選擇器元素的后代。如果選擇的< null或省略，當它到達選定的元素，事件總是觸發。
data:當一個事件被觸發時要傳遞event.data給事件處理函數。
fn:該事件被觸發時執行的函數。 false 值也可以做一個函數的簡寫，返回false。
events-map,[selector],[data]V1.7
events-map:個用字符串表示的，一個或多個空格分隔的事件類型和可選的命名空間，值表示事件綁定的處理函數。
selector:一個選擇器字符串過濾選定的元素，該選擇器的后裔元素將調用處理程序。如果選擇是空或被忽略，當它到達選定的元素，事件總是觸發。
data:當一個事件被觸發時要傳遞event.data給事件處理函數。
示例
描述:
Display a paragraph's text in an alert when it is clicked:
$("p").on("click", function(){ alert( $(this).text() ); });
Pass data to the event handler, which is specified here by name:
function myHandler(event) { alert(event.data.foo); } $("p").on("click", {foo: "bar"}, myHandler)
Cancel a form submit action and prevent the event from bubbling up by returning false:
$("form").on("submit", false)
Cancel only the default action by using .preventDefault().
$("form").on("submit", function(event) { event.preventDefault(); });
Stop submit events from bubbling without preventing form submit, using .stopPropagation().
$("form").on("submit", function(event) { event.stopPropagation(); });
jQuery on()方法是官方推薦的綁定事件的一個方法。
$(selector).on(event,childSelector,data,function,map)
由此擴展開來的幾個以前常見的方法有.
bind()
$("p").bind("click",function(){
alert("The paragraph was clicked.");
});
$("p").on("click",function(){
alert("The paragraph was clicked.");
});
delegate()
$("#div1").on("click","p",function(){
$(this).css("background-color","pink");
});
$("#div2").delegate("p","click",function(){
$(this).css("background-color","pink");
});
live()
$("#div1").on("click",function(){
$(this).css("background-color","pink");
});
$("#div2").live("click",function(){
$(this).css("background-color","pink");
});
以上三種方法在jQuery1.8之后都不推薦使用，官方在1.9時已經取消使用live()方法了，所以建議都使用on()方法。
tip:如果你需要移除on()所綁定的方法，可以使用off()方法處理。
$(document).ready(function(){
$("p").on("click",function(){
$(this).css("background-color","pink");
});
$("button").click(function(){
$("p").off("click");
});
});
tip:如果你的事件只需要一次的操作，可以使用one()這個方法
$(document).ready(function(){
$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});
});
trigger()綁定
$(selector).trigger(event,eventObj,param1,param2,...)
$(document).ready(function(){
$("input").select(function(){
$("input").after(" Text marked!");
});
$("button").click(function(){
$("input").trigger("select");
});
});
多個事件綁定同一個函數
$(document).ready(function(){
$("p").on("mouseover mouseout",function(){
$("p").toggleClass("intro");
});
});
多個事件綁定不同函數
$(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");}
});
});
綁定自定義事件
$(document).ready(function(){
$("p").on("myOwnEvent", function(event, showName){
$(this).text(showName + "! What a beautiful name!").show();
});
$("button").click(function(){
$("p").trigger("myOwnEvent",["Anja"]);
});
});
傳遞數據到函數
function handlerName(event)
{
alert(event.data.msg);
}
$(document).ready(function(){
$("p").on("click", {msg: "You just clicked me!"}, handlerName)
});
適用於未創建的元素
$(document).ready(function(){
$("div").on("click","p",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<p>This is a new paragraph.</p>").insertAfter("button");
});
});
前幾天在看《jquery基礎教程》，看到事件委托的時候，關於live()方法講的不是很詳細，就去搜了一下關於live()和delegate()的。
然后在一處看到live()已經被移除了，囧，然后去看了最新的jq源碼，果然被移除了，現在是1.9.1版本，不知道live()是在之前哪個版本被移除的，慚愧啊，之前都沒留意。
看源碼發現bind()和delegate()都是由on()實現的。on()的描述如下：
復制代碼代碼如下:
.on( events [, selector ] [, data ], handler(eventObject) )
一個簡單的事件綁定如 $('button').on('click',function(){}); 與bind()無二樣。
在需要為較多的元素綁定事件的時候，優先考慮事件委托，可以帶來性能上的好處。比如：
如上圖，將click事件綁定在document對象上，頁面上任何元素發生的click事件都冒泡到document對象上得到處理。
注意到.on()的描述中第二個可選參數：selector。如下圖，添加了第二個參數，選擇符button：
結果：
當事件冒泡到document對象時，檢測事件的target，如果與傳入的選擇符（這里是button）匹配，就觸發事件，否則不觸發。
注意.on()也可以接收一個對象參數，該對象的屬性是事件類型，屬性值為事件處理函數。下面是官方文檔的一個例子：
最后有一點，原先的live()方法，處理函數是默認綁定在document對象上不能變的，如果DOM嵌套結構很深，事件冒泡通過大量祖先元素會導致較大的性能損失。而使用.on()方法，事件只會綁定到$()函數的選擇符表達式匹配的元素上（上面我的例子中，為了簡單綁定到了document），因此可以精確地定位到頁面中的一部分，而事件冒泡的開銷也可以減少。delegate()與on()同理，畢竟是用on()實現的：