在我的上一篇文章中,
如何在JavaScript中創建自定義事件,我們討論了定制事件的好處和本機CustomEvent的對象。回顧一下,我們可以解雇自己的命名事件。這個示范者頁面提供了一個表單,它發射了一枚“newMessage”事件每當一個有效的消息被提交。任何數量的處理程序可以訂閱這個事件來執行他們自己的行為。
我們唯一的問題:CustomEvent目前不支持在Safari或Internet Explorer。
有辦法瀏覽器兼容性問題。一個解決方案是編寫您自己的事件封裝功能,實現定制事件功能。幸運的是,沒有必要:支持定制的事件在幾個JavaScript庫包括
jQuery.
jQuery的。觸發器方法是關鍵。你可以觸發一個事件,一個新的類型名稱和任意數據在任何時候,例如。
view plainprint?
$.event.trigger({
type: "newMessage",
message: "Hello World!",
time: new Date()
});
處理程序現在可以訂閱“newMessage”事件,例如。
view plainprint?
$(document).on("newMessage", newMessageHandler);
一個標準的事件處理程序查找一個HTML表單上的提交。這個函數獲取當前消息,假定它是有效的,派遣一個新的“newMessage”事件。
view plainprint?
$("#msgbox").on("submit", SendMessage);
// 新消息:提高newMessage事件
function SendMessage(e) {
e.preventDefault();
var msg = $("#msg").val().trim();
if (msg) {
$.event.trigger({
type: "newMessage",
message: msg,
time: new Date()
});
}
}
處理程序現在可以訂閱“newMessage”事件。這個事件只是提出如果有一個有效的信息:
view plainprint?
// newMessage事件訂閱者
$(document).on("newMessage", newMessageHandler);
// newMessage事件處理程序
function newMessageHandler(e) {
LogEvent(
"Event subscriber on "+e.currentTarget.nodeName+", "
+e.time.toLocaleString()+": "+e.message
);
}
消息本身可以提取的事件對象的消息屬性。
瀏覽器兼容性
jQuery 1。x方法運行在任何瀏覽器,包括Internet Explorer 6.0及以上。顯然這是一個巨大的獎金即使代碼運行(聯合國明顯)比本地CustomEvents慢。然而,要知道jQuery 2.0,計劃在2013年發布,將不支持IE6,7和8.