Summary of the way to directly contact and send events in native JavaScript

Using dispatchEvent

The core method for triggering events in native JavaScript is dispatchEvent. This method allows developers to trigger almost any type of event for any DOM element, including but not limited to clicking, changing, input, etc.

Technical case: Simulated click eventSimulating click events is a common requirement in automated testing or specific user interaction scripts. The following example shows how to use dispatchEvent to simulate a button click:

const button = ('myButton');
const clickEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true
});


('click', function() {
    ('Button was clicked programmatically!');
});


(clickEvent);

Using Event constructor

JavaScript's Event constructor allows the creation of event objects of any type that can then be dispatched via the dispatchEvent method. This provides extremely high flexibility, especially when handling custom events.

Technical case: Distribute custom data loading eventsCustom events are useful when data is loaded asynchronously from the server and need to be notified to other parts of the application to process this data. The following example shows how to create and distribute a custom event containing data:

('dataLoaded', function(e) {
    ('Received data:', );
});


function loadData() {
    fetch('/api/data')
        .then(response => ())
        .then(data => {
            const event = new CustomEvent('dataLoaded', { detail: data });
            (event);
        });
}


loadData();

Using the CustomEvent constructor

The CustomEvent constructor is an extension of the Event constructor that allows custom data to be passed. This is very useful for creating more complex event interactions.

Technical case: Implement a prompt box systemIn many applications, prompting users is a common requirement. Use CustomEvent to easily implement a dynamic prompt system:

('showAlert', function(e) {
    alert('Alert: ' + );
});


function triggerAlert(message) {
    const alertEvent = new CustomEvent('showAlert', { detail: { message: message } });
    (alertEvent);
}


triggerAlert('This is a custom alert!');

Directly simulate event handler

In older JavaScript code, especially before the dispatchEvent method appears, developers usually call event handlers on the DOM element directly, such as onclick. This approach is now not recommended because it lacks flexibility and may not comply with modern web standards.

Technical case: Direct call event handler

const button = ('myButton');

 = function() {
    ('Button was clicked!');
};

// Directly call the event handler();

Use createEvent and initEvent

createEvent method Before the Event constructor became standard, the method was used to create events, then initialize them through the initEvent method, and finally triggered with dispatchEvent. Although this method is not recommended now, understanding it helps with old code.

Technical case: Use createEvent and initEvent

const event = ('Event');
('custom', true, true);
('custom', function() {
    ('Custom event triggered!');
});
(event);

This is the article about the method of direct contact and posting events in native JavaScript. For more related contents of direct contact and posting events in native JavaScript, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!