on()方法為所選元素和子元素附加一個(gè)或多個(gè)事件處理程序。
這也附加了事件發(fā)生時(shí)要運(yùn)行的函數(shù)。
要?jiǎng)h除事件處理程序，請(qǐng)使用off()方法。
若要附加僅運(yùn)行一次然后將其自身刪除的事件，請(qǐng)使用one()方法。
$(selector).on(event, childSelector, data, function)
將點(diǎn)擊事件附加到所有<p>元素：
$("p").on("click", function(){
$(this).css("background-color", "coral");
});測(cè)試看看?/?將mouseenter事件附加到所有<p>元素：
$("p").on("mouseenter", function(){
$(this).css("background-color", "coral");
});測(cè)試看看?/?將多個(gè)事件處理程序添加到<div>元素：
$("div").on("mouseenter mouseleave click", function(){
$(this).text(Math.random());
});測(cè)試看看?/?將數(shù)據(jù)傳遞給函數(shù)：
$(document).ready(function(){
$("p").on("click", {msg: "你剛剛點(diǎn)了我!!!"}, showMsg)
});
function showMsg(event) {
$(this).append(event.data.msg);
});測(cè)試看看?/?使用childSelector參數(shù)將click事件附加到所有<p>元素：
$(document).ready(function(){
$("body").on("click", "p", changeSize);
});測(cè)試看看?/?從<div>元素中刪除mousemove事件：
$("button").click(function(){
$("div").off("mousemove");
});測(cè)試看看?/?| 參數(shù) | 描述 |
|---|---|
| event | 指定一個(gè)或多個(gè)用空格分隔的事件或名稱空間 |
| childSelector | （可選）指定事件處理程序應(yīng)僅附加到指定的子元素（而不是選擇器本身） |
| data | （可選）指定要傳遞給該函數(shù)的其他數(shù)據(jù) 注意：如果將數(shù)據(jù)參數(shù)提供給on()方法，則每次觸發(fā)事件時(shí)，該參數(shù)都會(huì)在event.data屬性中傳遞給處理程序 |
| function | 觸發(fā)事件時(shí)執(zhí)行的功能 |