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

核心要点

• JavaScript事件处理是所有客户端应用程序的基础，但它们与DOM元素相关联，可能不够灵活。JavaScript自定义事件解决了这个问题，提供了更高的灵活性和易维护性。
• 创建JavaScript自定义事件包括将事件名称、详细信息和选项传递给新的CustomEvent对象。创建后，可以使用dispatchEvent方法在特定元素上分派此事件。
• 多个处理程序可以订阅自定义事件，从而可以根据事件执行不同的操作。Chrome、Firefox和Opera支持自定义事件，一些JavaScript库也提供支持。

JavaScript事件处理是所有客户端应用程序的基础。当目标元素（例如按钮点击、鼠标移动、表单提交等）上发生事件时，将执行处理程序函数。一个事件对象被传递给处理程序，该对象提供各种属性和许多方法来阻止默认操作。一个缺点是事件与DOM元素紧密相连。考虑一个简单的表单，它接受用户的留言：

<label for="msg">你的留言</label><input type="text" id="msg"><button type="submit" form="msgbox">发送</button>
<form id="msgbox"></form>

当提交该表单时，我们可以编写一个处理程序将留言回显到屏幕上，例如：

document.getElementById("msgbox").addEventListener("submit", function(e) {
    e.preventDefault();
    var msg = e.currentTarget.getElementById("msg").value.trim();
    if (msg) {
        alert(msg);
    }
}, false);

如果我们还想将留言发送为推文、将其存储在服务器上或执行其他操作呢？对于现有的事件委托方法，我们有两个选择：

1. 在现有处理程序中添加更多代码。 这不够灵活，因为每次添加、更改或删除功能时，都需要更新和测试处理程序函数。发布的留言可能有数十种用途，而我们试图将它们全部应用于同一代码块中。

2. 为每种用途创建更多事件处理程序。 这将产生更优雅的代码，但会导致维护问题。首先，每个函数都必须执行类似的操作来提取和验证留言。如果我们需要更改表单怎么办？只需重命名ID就需要更改每个订阅者的事件处理代码。

如果我们可以在发布有效留言时简单地触发一个自定义“newMessage”事件，那不是很好吗？如果我们可以监控document或body标签而不是引用特定表单节点，那就更好了。自定义事件正是允许我们这样做。触发自定义事件很简单；我们将名称、详细信息和选项传递给新的CustomEvent对象：

var event = new CustomEvent(
    "newMessage", 
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    }
);

在此示例中，“newMessage”是自定义事件类型。第二个参数是一个具有三个属性的对象：

• detail：一个子对象，提供有关事件的自定义信息。在此示例中，我们添加了留言和时间。
• bubbles：如果为true，事件将冒泡到触发事件的元素的祖先。
• cancelable：如果为true，可以使用事件对象的stopPropagation()方法取消事件。

现在，我们需要在特定元素上分派此事件，例如：

<label for="msg">你的留言</label><input type="text" id="msg"><button type="submit" form="msgbox">发送</button>
<form id="msgbox"></form>

任何数量的处理程序都可以使用以下代码订阅此事件：

document.getElementById("msgbox").addEventListener("submit", function(e) {
    e.preventDefault();
    var msg = e.currentTarget.getElementById("msg").value.trim();
    if (msg) {
        alert(msg);
    }
}, false);

演示页面

此示例演示了该技术：查看自定义事件演示页面。标准事件处理程序查找上面HTML表单的提交。该函数获取当前留言，并假设它有效，则分派新的“newMessage”事件。

var event = new CustomEvent(
    "newMessage", 
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    }
);

处理程序现在可以订阅“newMessage”事件。仅当存在有效留言时才会触发事件，并且由于bubbles设置为true，因此该事件可以应用于表单或其任何祖先，例如根document，例如：

document.getElementById("msgbox").dispatchEvent(event);

留言本身可以从事件对象的detail.message属性中提取。

浏览器兼容性

在撰写本文时，Chrome、Firefox和Opera支持CustomEvent对象。它在Safari的夜间版本中可用，因此很可能很快就会出现在该浏览器中。IE9及以下版本不支持该对象。幸运的是，几个JavaScript库支持自定义事件委托，因此请继续关注SitePoint，以便很快获得跨浏览器解决方案。

(此处省略了FAQs部分，因为与伪原创目标不符，且篇幅过长。)

以上是如何在JavaScript中创建自定义事件的详细内容。更多信息请关注PHP中文网其他相关文章！