jQuery的on()方法是一個用于綁定事件的功能強大的函數。通過它,不僅可以綁定事件,還可以對新添加的元素進行事件綁定。
// 鼠標點擊事件 $("button").on("click", function(){ alert("按鈕被點擊了!"); }); // 表單提交事件 $("form").on("submit", function(event){ event.preventDefault(); // ... }); // 新添加元素的點擊事件 $("body").on("click", "button.dynamic", function(){ alert("新添加的按鈕被點擊了!"); });
on()方法的第一個參數是事件類型,第二個參數是事件回調函數。它們可以是一個或多個空格分隔的事件類型和回調函數。on()方法還可以接受一個可選的參數,用于傳遞數據給事件回調函數。
$("button").on("click", function(event, data1, data2){ alert(data1 + " and " + data2); }); $("button").trigger("click", ["hello", "world"]);
當然,你還可以使用on()方法動態綁定和解除事件,該方法還提供了一些快捷事件別名的方式,例如click、keydown、change等等。下面是一個實際應用示例:
$("body").on({ click: function(){ $(this).toggleClass("active"); }, mouseenter: function(){ $(this).addClass("highlight"); }, mouseleave: function(){ $(this).removeClass("highlight"); } }, "button.dynamic");
通過簡單的代碼組合,我們可以用on()方法來實現各種事件綁定和操作。它不僅提供了便捷的快捷事件別名,還可以讓我們動態處理事件,解除事件綁定等等。這相信對于開發中涉及到大量DOM操作的項目來說,都是十分實用和必要的。