Custom Event
- selain mendengarkan event yang ada kita juga dapat menciptakan event sendiri
- langkah membuat custom event
1. membuat object baru dengan new event()
2. mendengarkan event dengan method addEventListener()
3. memicu atau triger dengan method dispatchEvent()
// membuat object untuk custom event
const namaObjectEvent = new Event("nama-event");
// mendengarkan event
domObject.addEventListener("nama-event", function () {});
// memicu atau triger event
domObject.dispatchEvent(namaObjectEvent);
// atau bisa juga di triger pada object window dan document
window.dispatchEvent(namaObjectEvent);
document.dispatchEvent(namaObjectEvent);
membuat custom event
- script
// membuat object custom event
const eventRegisterCompleate = new Event("register-compleate");
// membuat object element dom
const messageElement = document.getElementById("message");
const btnSubmit = document.getElementById("btn-submit");
// handle untuk custom event
document.addEventListener("register-compleate", function(e) {
messageElement.style.display = "flex";
});
// handle untuk submit event klick pada button
btnSubmit.addEventListener("click", function(e) {
// trigger custom event register-compleate
document.dispatchEvent(eventRegisterCompleate);
});
- cara kerjanya
eventRegisterCompleate adalah variable yang berisi event register-compleate
lalu register-compleate itu dibuat menjadi addEventListener yang memiliki fungsi menampilkan messageElement
sama seperti function pada umumnya
namun ini dipanggil menggunakan
document.dispatchEvent(eventRegisterCompleate);