JavaScript dispatchEvent

摘要：在本教程中，您将学习如何使用 Event 构造函数和 dispatchEvent() 方法以编程方式创建和调度事件。

通常，事件是由用户操作生成的，例如鼠标点击和按键。此外，事件也可以从代码中生成。

要以编程方式生成事件，请执行以下步骤

• 首先，使用 Event 构造函数创建一个新的 Event 对象。
• 然后，使用 element.dispatchEvent() 方法触发事件。

Event 构造函数

要创建一个新的事件，您可以使用 Event 构造函数，如下所示

let event = new Event(type, [,options]);Code language: JavaScript (javascript)

Event 构造函数接受两个参数

type

是一个字符串，指定事件类型，例如 'click'。

options

是一个对象，包含两个可选属性

• bubbles：是一个布尔值，确定事件是否冒泡。如果为 true，则事件冒泡，反之亦然。
• cancelable：也是一个布尔值，指定事件是否可取消，如果为 true，则事件可取消。

默认情况下，options 对象为

{ bubbles: false, cancelable: false}Code language: CSS (css)

例如，以下代码创建了一个新的 click 事件，具有默认的 options 对象

let clickEvent = new Event('click');Code language: JavaScript (javascript)

dispatchEvent 方法

创建事件后，您可以使用 dispatchEvent() 方法在目标元素上触发它，如下所示

element.dispatchEvent(event);Code language: CSS (css)

例如，以下代码演示了如何创建 click 事件并在按钮上触发它

HTML

<button class="btn">Test</button>Code language: HTML, XML (xml)

JavaScript

let btn = document.querySelector('.btn');

 btn.addEventListener('click', function () {
        alert('Mouse Clicked');
 });

let clickEvent = new Event('click');
btn.dispatchEvent(clickEvent);
Code language: JavaScript (javascript)

单击此链接查看演示.

在此示例中，事件处理程序被执行，就好像 click 事件是由用户操作生成的。

如果事件来自用户操作，则 event.isTrusted 属性设置为 true。如果事件是由代码生成的，则 event.isTrusted 为 false。因此，您可以检查 event.isTrusted 属性的值以检查事件的“真实性”。

Event 是 UIEvent 的基本类型，UIEvent 是其他特定事件类型的基本类型，例如 MouseEvent、TouchEvent、FocusEvent 和 KeyboardEvent。

最佳实践是使用专门的事件构造函数，例如 MouseEvent，而不是使用通用的 Event 类型，因为这些构造函数提供了更多特定于事件的信息。

例如，MouseEvent 事件具有许多其他属性，例如 clientX 和 clientY，它们指定事件相对于视窗发生的水平和垂直坐标

let clickEvent = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    clientX: 150,
    clientY: 150
});Code language: JavaScript (javascript)

以下链接显示了MouseEvent的所有属性列表

总结

• 使用特定事件构造函数，例如 MouseEvent，并在元素上调用 dispatchEvent() 方法以从代码中生成事件。
• 使用 event.isTrusted 检查事件是来自代码还是用户操作。