HTML Element .dispatchEvent() Since: DOM Level 2（2000）

// Fires an event on the element.
element.dispatchEvent(eventObject);

// Creates a custom event.
var event = new CustomEvent("eventName", { detail: data });

// Creates a standard event.
var event = new Event("eventName");

<button id="btn">Click</button>
<button id="autoBtn">Auto Click</button>
<div id="app"></div>
<p id="output"></p>

var btn = document.querySelector("#btn");
var autoBtn = document.querySelector("#autoBtn");
var app = document.querySelector("#app");
var output = document.querySelector("#output");

// Register a click event listener on the button.
btn.addEventListener("click", function() {
	output.textContent = "Button was clicked";
});

// Use dispatchEvent() to manually fire a standard event.
autoBtn.addEventListener("click", function() {
	var clickEvent = new Event("click");
	btn.dispatchEvent(clickEvent); // Triggers the click listener on btn.
});

// Listen for a custom event and read its data.
app.addEventListener("userLogin", function(e) {
	output.textContent = e.detail.name + " has logged in";
});

// Fire the custom event with data in the detail property.
var loginEvent = new CustomEvent("userLogin", {
	detail: { name: "Taro", role: "admin" }
});
app.dispatchEvent(loginEvent);

element.dispatchEvent() is a method that fires an event programmatically. Because it can trigger event listeners without any user interaction, it is useful for test automation and communication between components.

Using new CustomEvent(), you can define your own event name and include arbitrary data in the detail property. Listeners can then read that data via event.detail, making it a handy mechanism for passing data between HTML elements.

Events fired by element.dispatchEvent() only trigger listeners registered with element.addEventListener(). The browser's default behavior is not triggered — for example, firing a click event on a link will not navigate the page. To enable bubbling, pass { bubbles: true } in the options.