在我的上一篇文章中,
如何在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.