使用JavaScript在HTML元素上以编程方式触发事件

JavaScript的EventTarget.dispatchEvent()方法允许您以编程方式触发事件。该方法接受一个Event对象作为唯一参数，可以使用常规的Event构造函数或CustomEvent构造函数来创建该对象。

通常，您会希望使用CustomEvent构造函数，因为它允许您向事件监听器传递自定义数据。该构造函数接受两个参数：eventType和detail。eventType参数是一个字符串，用于指定要创建的事件的类型（例如'click'）。detail参数是一个包含要传递给事件监听器的自定义数据的对象。

将所有这些组合在一起，您可以创建一个函数，以在HTML元素上以编程方式触发事件：

const triggerEvent = (el, eventType, detail) =>
  el.dispatchEvent(new CustomEvent(eventType, { detail }));

const myElement = document.getElementById('my-element');
myElement.addEventListener('click', e => console.log(e.detail));

triggerEvent(myElement, 'click');
// 事件监听器将记录：null

triggerEvent(myElement, 'click', { username: 'bob' });
// 事件监听器将记录：{ username: 'bob' }