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)