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