如何在JavaScript中创建自定义事件

javaScript事件处理所有客户端应用程序的基础。当一个事件发生在目标元素,如按钮单击,鼠标移动,表单提交等,一个处理程序函数执行。一个事件对象传递给处理程序提供各种属性和大量的方法来防止违规行为。
一个缺点是,事件不可避免地与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对于一个跨浏览器的解决方案很快。