Memahami Event di JavaScript.

Event adalah cara browser memberi tahu kode JavaScript bahwa sesuatu telah terjadi: pengguna mengklik tombol, mengetik di form, atau halaman selesai dimuat.

addEventListener

const tombol = document.querySelector("#tombolSimpan");

tombol.addEventListener("click", () => {
  console.log("Tombol diklik!");
});

addEventListener adalah cara standar modern untuk menangani event, menggantikan atribut lama seperti onclick="..." di HTML.

Event Object

Setiap fungsi penanganan event menerima objek event yang berisi detail kejadian tersebut.

const input = document.querySelector("#pencarian");

input.addEventListener("input", (event) => {
  console.log("Nilai saat ini:", event.target.value);
});

preventDefault: Mencegah Perilaku Default

const form = document.querySelector("#formLogin");

form.addEventListener("submit", (event) => {
  event.preventDefault(); // mencegah reload halaman saat submit
  console.log("Form diproses lewat JavaScript");
});

Event Bubbling dan stopPropagation

Secara default, event menyebar dari elemen yang diklik ke elemen induknya (bubbling).

document.querySelector("#kartu").addEventListener("click", () => {
  console.log("Kartu diklik");
});

document.querySelector("#tombolHapus").addEventListener("click", (event) => {
  event.stopPropagation(); // mencegah event 'menyebar' ke elemen induk
  console.log("Tombol hapus diklik");
});

Event Delegation

Alih-alih memasang listener ke setiap elemen anak, event delegation memanfaatkan bubbling dengan memasang satu listener di elemen induk.

document.querySelector("#daftarTugas").addEventListener("click", (event) => {
  if (event.target.matches(".tombol-hapus")) {
    event.target.closest("li").remove();
  }
});

Pola ini jauh lebih efisien saat elemen anak dibuat secara dinamis, karena listener tidak perlu dipasang ulang setiap kali elemen baru ditambahkan.

Melepas Event Listener

function tanganiKlik() {
  console.log("Diklik sekali saja");
  tombol.removeEventListener("click", tanganiKlik);
}

tombol.addEventListener("click", tanganiKlik);

Kesimpulan

addEventListener adalah fondasi interaktivitas di JavaScript untuk browser, dilengkapi preventDefault() untuk mencegah perilaku bawaan dan stopPropagation() untuk mengontrol penyebaran event. Event delegation menjadi teknik penting saat bekerja dengan elemen yang dibuat secara dinamis, karena jauh lebih hemat sumber daya dibanding memasang listener satu per satu.