您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 相關知識

jQuery on() 事件綁定全方位指南：取代 bind/delegate/live

編輯：PHP 相關知識

語法

$(selector).on(event, childSelector, data, function, map)

event：事件類型（可空格分隔多個，如 "click mouseover"）
childSelector：委派選擇器（可選），啟用事件委派
data：傳遞給處理函數的資料（可選）
function：事件處理函數
map：事件-處理函數對應物件（可選）

取代舊版 API 對照表

舊方法 (jQuery 1.8+ 棄用, 1.9 移除)	on() 等效寫法
`bind('click', fn)`	`on('click', fn)`
`delegate('p', 'click', fn)`	`on('click', 'p', fn)`
`live('click', fn)`	`$(document).on('click', fn)` 或 `on('click', selector, fn)` 配合委派

建議：統一使用 on()，移除綁定用 off()，單次觸發用 one()。

核心用法範例

基本綁定

$("p").on("click", function() {
    alert("段落被點擊");
});

事件委派（動態元素）

$("#container").on("click", "p", function() {
    $(this).css("background", "pink");
});
// 後續新增的 <p> 也會生效

移除綁定

$("p").on("click", fn);
$("button").click(function() {
    $("p").off("click"); // 移除所有 click
    $("p").off("click", fn); // 移除特定處理函數
});

單次觸發

$("p").one("click", function() {
    $(this).animate({fontSize: "+=6px"});
});

觸發事件

$("input").select(function() {
    $(this).after(" 已選取文字!");
});
$("button").click(function() {
    $("input").trigger("select"); // 手動觸發 select 事件
});

多事件綁定同一處理函數

$("p").on("mouseover mouseout", function() {
    $("p").toggleClass("intro");
});

多事件綁定不同處理函數 (Map 物件)

$("p").on({
    mouseover: function() { $("body").css("background", "lightgray"); },
    mouseout:  function() { $("body").css("background", "lightblue"); },
    click:     function() { $("body").css("background", "yellow"); }
});

自訂事件與資料傳遞

$("p").on("myEvent", function(event, name) {
    $(this).text(name + "! 你好!").show();
});
$("button").click(function() {
    $("p").trigger("myEvent", ["訪客"]); // 傳遞參數陣列
});

傳遞資料到處理函數

function handler(event) {
    alert(event.data.msg);
}
$("p").on("click", {msg: "你點擊了我!"}, handler);

適用動態新增元素（委派模式）

$("div").on("click", "p", function() {
    $(this).slideToggle();
});
$("button").click(function() {
    $("新段落").insertAfter("button"); // 新增元素自動生效
});