Javascript custom events

2024-01-08

Custom events are a way to decouple a Javascript application. Trigger an event with the onclick handler (onclick="triggerEvent(this,'my-event')") of an element, and listen for it elsewhere in the application.

function triggerEvent(el, name) {
    document.body.dispatchEvent(new CustomEvent('app:' + name, { detail: el }))
}
function main() {
    document.body.addEventListener('app:my-event', function (event) {
        console.log(event.detail)  // element that triggered the event
    });
}
document.addEventListener('DOMContentLoaded', main)