Javascript: cara yang digunakan untuk mencegah terjadinya event Bubbling atau Capturing
Untuk mencegah terjadinya event bubbling atau capturing pada JavaScript, Anda dapat menggunakan metode event.stopPropagation() atau event.preventDefault() pada objek event.
Metode event.stopPropagation() digunakan untuk menghentikan event dari menyebar (bubbling) dari elemen anak ke elemen induk. Contohnya, jika Anda mengklik tombol di dalam elemen div, event klik akan menyebar ke elemen div dan elemen body. Dalam hal ini, Anda dapat menggunakan event.stopPropagation() pada tombol untuk menghentikan event dari menyebar ke elemen div atau elemen body.
Contoh penggunaan event.stopPropagation():
document.querySelector('button').addEventListener('click', function(event) {
event.stopPropagation();
// kode yang ingin dijalankan ketika tombol diklik
});
Sedangkan metode event.preventDefault() digunakan untuk mencegah perilaku default dari sebuah event. Contohnya, ketika Anda mengklik tautan (link), halaman akan berpindah ke halaman baru secara default. Dalam hal ini, Anda dapat menggunakan event.preventDefault() untuk mencegah perilaku default dari event.
Contoh penggunaan event.preventDefault():
document.querySelector('a').addEventListener('click', function(event) {
event.preventDefault();
// kode yang ingin dijalankan ketika tautan diklik
});
Perlu diingat bahwa penggunaan event.stopPropagation() atau event.preventDefault() harus dilakukan dengan hati-hati, karena dapat mempengaruhi perilaku dan fungsionalitas dari halaman web Anda.
