怎么在JavaScript中创建自定义事件
日期：2014-05-16 浏览次数：20329 次
如何在JavaScript中创建自定义事件
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的对象:
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
