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() 函数并为

元素添加边框。

JS Custom Event Demo

JS Custom Event Demo

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 自定义事件示例将所有内容整合在一起

JavaScript Custom Event

JS Custom Event

Code language: HTML, XML (xml)工作原理

首先，声明 highlight() 函数，该函数突出显示元素并触发 highlight 事件。其次，使用 querySelector() 方法选择

元素。第三，侦听 highlight 事件。在事件侦听器内，调用 addBorder() 函数并在控制台中显示 detail 属性。最后，调用 highlight() 函数，该函数将触发 highlight 事件。为什么要使用自定义事件自定义事件允许您解耦您想要在另一段代码完成执行后执行的代码。例如，您可以将事件侦听器分离到单独的脚本中。此外，您可以在同一个自定义事件上有多个事件侦听器。

摘要使用 CustomEvent() 构造函数创建自定义事件，并使用 dispatchEvent() 触发事件。本教程对您有帮助吗？ 是的 不是 发送 取消