JavaScript 自定义事件的完整指南

摘要：在本教程中，您将学习有关 JavaScript 自定义事件的知识，例如创建自定义事件和派发它。

JavaScript 自定义事件简介

以下函数通过将元素的背景颜色更改为 yellow 来突出显示元素。

function highlight(elem) {
    const bgColor = 'yellow';
    elem.style.backgroundColor = bgColor;
}Code language: JavaScript (javascript)

要执行在突出显示元素后执行的代码，您可能会想到一个回调。

function highlight(elem, callback) {
    const bgColor = 'yellow';
    elem.style.backgroundColor = bgColor;

    if(callback && typeof callback === 'function') {
        callback(elem);
    }
}
Code language: JavaScript (javascript)

以下调用 highlight() 函数并为 <div> 元素添加边框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Custom Event Demo</title>
</head>
<body>
    <div class="note">JS Custom Event Demo</div>
    <script>
        function highlight(elem, callback) {
            const bgColor = 'yellow';
            elem.style.backgroundColor = bgColor;

            if (callback && typeof callback === 'function') {
                callback(elem);
            }
        }

        let note = document.querySelector('.note');
        function addBorder(elem) {
            elem.style.border = "solid 1px red";
        }

        highlight(note, addBorder);
    </script>
</body>
</html>Code language: HTML, XML (xml)

为了使代码更灵活，您可以使用自定义事件。

创建 JavaScript 自定义事件

要创建自定义事件，您使用 CustomEvent() 构造函数。

let event = new CustomEvent(eventType, options);Code language: JavaScript (javascript)

CustomEvent() 具有两个参数。

eventType 是一个字符串，表示事件的名称。
options 是一个对象，具有 detail 属性，该属性包含有关事件的任何自定义信息。

以下示例显示了如何创建一个名为 highlight 的新自定义事件。

let event = new CustomEvent('highlight', {
    detail: {backgroundColor: 'yellow'}
});
Code language: JavaScript (javascript)

派发 JavaScript 自定义事件

创建自定义事件后，您需要将事件附加到 DOM 元素，并使用 dispatchEvent() 方法触发它。

domElement.dispatchEvent(event);Code language: JavaScript (javascript)

JavaScript 自定义事件示例

将所有内容整合在一起

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Custom Event</title>
</head>
<body>
    <div class="note">JS Custom Event</div>
    <script>
        function highlight(elem) {
            const bgColor = 'yellow';
            elem.style.backgroundColor = bgColor;

            // create the event
            let event = new CustomEvent('highlight', {
                detail: {
                    backgroundColor: bgColor
                }
            });
            // dispatch the event
            elem.dispatchEvent(event);
        }

        // Select the div element
        let div = document.querySelector('.note');

        // Add border style
        function addBorder(elem) {
            elem.style.border = "solid 1px red";
        }

        // Listen to the highlight event
        div.addEventListener('highlight', function (e) {
            addBorder(this);

            // examine the background
            console.log(e.detail);
        });

        // highlight div element
        highlight(div);
    </script>
</body>
</html>Code language: HTML, XML (xml)

工作原理

首先，声明 highlight() 函数，该函数突出显示元素并触发 highlight 事件。
其次，使用 querySelector() 方法选择 <div> 元素。
第三，侦听 highlight 事件。在事件侦听器内，调用 addBorder() 函数并在控制台中显示 detail 属性。
最后，调用 highlight() 函数，该函数将触发 highlight 事件。

为什么要使用自定义事件

自定义事件允许您解耦您想要在另一段代码完成执行后执行的代码。例如，您可以将事件侦听器分离到单独的脚本中。此外，您可以在同一个自定义事件上有多个事件侦听器。

摘要

使用 CustomEvent() 构造函数创建自定义事件，并使用 dispatchEvent() 触发事件。

本教程对您有帮助吗？