javaScript事件處理所有客戶端應用程式的基礎。當一個事件發生在目標元素,如按鈕點擊,滑鼠移動,表單提交等,一個處理程序函數執行。一個事件物件傳遞給處理程序提供各種屬性和大量的方法來防止違規行為。
一個缺點是,事件不可避免地與DOM元素。考慮一個簡單的形式,它接受來自用戶的信息:
我們可以編寫一個處理程序echo訊息時的畫面,提交表單,如。
document.getElementById("msgbox").addEventListener("submit", function(e) {
e.preventDefault();
var msg = e.current.getElementByvalue if (msg) {
alert(msg);
}
}, false);
如果我們還想發送訊息作為一個tweet,它儲存在一個行動上我們有執行其他伺服器的行為有事件委託方法:
1，新增程式碼以我們現有的進一步處理程序。
這是我們需要更新以來僵化和測試我們的處理程序函數每次我們添加、更改或刪除功能。可能會有幾十個用途公佈的消息,我們試圖應用它們都在相同的代碼塊。
2事件處理程序建立進一步為每個使用。
這將導致更優雅的程式碼而導致的維護問題。首先,每一個函數必須執行類似的行動來提取和驗證訊息。如果我們需要改變我們的形式?簡單的重命名ID需要我們改變事件處理代碼為每個訂戶。
那不是很好,如果我們可以簡單地提高一個自定義的“newMessage”事件每當一個有效的消息發布?它甚至會更好,如果我們可以簡單地監控文檔或body標籤而不是引用一個特定的form節點。這正是客製化事件允許我們去做。
提高一個客製化事件很簡單;我們透過名稱、細節和選擇一個新的CustomEvent的物件:
var event = new CustomEvent(
"newMessage",
message: "Hello World!",
time: new Date(),
},
bubbles: true,
age」是自訂的事件��型。第二個參數是一個物件有三個屬性:
細節:一個孩子物件提供客製化的事件的資訊。在這個例子中,我們增加了一個訊息和時間。
泡沫:如果這是真的,事件將泡沫的祖先元素觸發了事件。
可取消:如果這是真的,���件可以被取消使用事件物件的stopPropagation()方法。
現在,我們需要調度這個事件在一個特定的元素,例如。
document.getElementById("msgbox").dispatchEvent(event);
任何數量的處理程序可以訂閱這個事件使用程式碼如:
document.addEventListener("newMessage", newMessageHandler, false);程式找提交HTML表單的上面。這個函數取得當前訊息,假定它是有效的,派遣一個新的「newMessage」事件。
var msgbox = document.getElementById("msgbox");
msgbox.addEventListener("submit", SendMessage, false);
// 新訊息:提高newMessage事件function Sendefage(eunction);
var msg = document.getElementById("msg").value.trim();
if (msg && window.CustomEvent) {
detail: {
message: msg,
time: new Date(),
cancelable: true
});
”事件。這個事件只是提出如果有一個有效的消息,自從泡沫被設置為true,事件可以應用於表單或任何它的祖先如根文檔,例如。
// 傾聽newMessage事件
document.addEventListener("newMessage", newMessageHandler, false);
// newMessage事件處理程序
function newMessageHancrcr iber on "+e.currentTarget.nodeName+" , "
+e.detail.time.toLocaleString()+": "+e.detail.message
);
}
訊息本身可以擷取細節。訊息屬性的事件物件。
瀏覽器相容性
在撰寫本文的時候,物件是支援CustomEvent的Chrome,Firefox和Opera。它可以在夜間版本的Safari所以很可能很快就抵達,瀏覽器。
IE9和低於不支援對象。幸運的是,一些JavaScript庫支援自訂事件代表團,所以繼續看SitePoint對於一個跨瀏覽器的解決方案很快。
