## 綁定事件 on(events, \[selector\], \[data\], fn) 概述：在選擇元素上綁定一個或多個事件的事件處理函數。 * events：一個或多個用空格分隔的事件類型和可選的命名空間。 * selector：一個選擇器字符串用于過濾器的觸發事件的選擇器元素的后代。 * data：當一個事件被觸發時要傳遞 event.data 給事件處理函數。 * fn：該事件被觸發時執行的函數。 ~~~ // 點擊段落，彈框顯示段落內容 $("p").on("click", function(){ alert($(this).text()); }); // 點擊段落，向事件觸發函數傳遞參數 function myHandler(event) { alert(event.data.foo); } $("p").on("click", {foo: "bar"}, myHandler); // 表單點擊提交按鈕時，阻止表單執行默認提交 $("form").on("submit", function(event) { event.preventDefault(); }); ~~~ ## 移除事件 off(events, \[selector\], \[fn\]) 概述：在選擇元素上移除一個或多個事件的事件處理函數。 * events：一個或多個空格分隔的事件類型和可選的命名空間 * selector：一個最初傳遞到.on()事件處理程序附加的選擇器。 * fn：事件處理程序函數以前附加事件上 ~~~ $("p").off(); // 移除段落的所有綁定事件 var foo = function () {// ...}; $("body").on("click", "p", foo); // 移除段落添加的點擊事件 $("body").off("click", "p", foo); ~~~ ## 一次性事件 one(type\[, data\], fn) 概述：為每一個匹配元素的特定事件綁定一個一次性的事件處理函數。 ~~~ // 當所有段落被第一次點擊的時候，顯示所有其文本。 $("p").one("click", function(){ alert( $(this).text() ); }); ~~~ ## 觸發事件 trigger(type\[, data\]) 概述：在每一個匹配的元素上觸發某類事件。 ~~~ $("form:first").trigger("submit"); // 不點擊按鈕，代碼觸發提交表單 // 向事件函數傳遞參數 $("p").click(function(event, a, b) { // 一個普通的點擊事件時，a 和 b 是 undefined 類型 // 如果用下面的語句觸發，那么 a 指向"foo",而 b 指向"bar" }).trigger("click", ["foo", "bar"]); ~~~ ## 觸發事件 triggerHandler(type\[, data\]) 概述：這個特別的方法將會觸發指定的事件類型上所有綁定的處理函數。 ~~~ <button id="old">.trigger("focus")</button> <button id="new">.triggerHandler("focus")</button><br/><br/> <input type="text" value="To Be Focused"/> // 如果你對一個 focus 事件執行了 .triggerHandler() ，瀏覽器默認動作將不會被觸發，只會觸發你綁定的動作。 $("#old").click(function(){ $("input").trigger("focus"); }); $("#new").click(function(){ $("input").triggerHandler("focus"); }); $("input").focus(function(){ $("<span>Focused!</span>").appendTo("body").fadeOut(1000); }); ~~~