How Do I Programmatically Trigger Events in JavaScript?

Triggering Events Programmatically in JavaScript

In JavaScript, events are typically attached to a specific element using the addEventListener method. However, there are times when you need to trigger an event programmatically from another function. I will explain this method.

In the past, two main methods were used to trigger events: fireEvent (IE 8 and below) and dispatchEvent (most other browsers). However, the initEvent method is no longer recommended.

The modern approach is to create an event using createEvent or createEventObject, depending on browser support, and trigger it using dispatchEvent.

Below is sample code that triggers the dataavailable event on a specific element.

var event; // カスタムイベント

if (document.createEvent) {
    // W3C の dispatchEvent を使用
    event = document.createEvent("HTMLEvents");
    event.initEvent("dataavailable", true, true);
    event.eventName = "dataavailable";
    element.dispatchEvent(event);
} else {
    // IE 8 以下用の fireEvent を使用
    event = document.createEventObject();
    event.eventName = "dataavailable";
    event.eventType = "dataavailable";
    element.fireEvent("on" + event.eventType, event);
}

This code creates a custom event for the dataavailable event and triggers it programmatically on the specified element element.

The above is the detailed content of How Do I Programmatically Trigger Events in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!