🖱️ Event Handling

Inilah inti dari interaktivitas web! Event handling adalah bagian penting yang membuat halaman web terasa responsif terhadap tindakan pengguna. Bayangkan halaman web seperti panggung teater—tanpa interaksi, semuanya statis. Tapi begitu pengguna mengklik tombol, menggeser mouse, atau mengetik sesuatu, itu seperti memberi isyarat pada aktor (JavaScript) untuk mulai bertindak. Dan dengan event handling, kita bisa mengatur skrip apa yang harus dijalankan saat "pertunjukan" dimulai.
Contohnya, saat pengguna menekan tombol "Kirim", kita bisa buat fungsi JavaScript yang memvalidasi formulir atau menampilkan pesan sukses. Ini dilakukan dengan metode seperti addEventListener(), yang memungkinkan kita mendengarkan aksi tertentu (misalnya click) lalu meresponsnya dengan kode tertentu. Dengan cara ini, kita bisa menciptakan pengalaman pengguna yang lebih interaktif dan menyenangkan—tanpa harus memuat ulang halaman!

👂 Struktur Umum Event Handling

// Misalkan kita punya HTML ini: 

// 1. Pilih elemen target
const tombol = document.getElementById("tombolSaya");

// 2. Tambahkan "pendengar event" (event listener) pada elemen tersebut
// Metode .addEventListener() adalah cara modern dan yang paling direkomendasikan.
tombol.addEventListener("click", function() {
  // 3. Fungsi ini (disebut callback function) akan dijalankan
  //    SETIAP KALI event 'click' terjadi pada elemen tombol.
  alert("Anda baru saja mengklik tombol!");
});

Penjelasan dari konsep di atas sebagai berikut:

Memilih Elemen: Sama seperti manipulasi DOM, langkah pertamanya adalah memilih elemen HTML mana yang ingin kita "dengarkan" aksinya.
addEventListener(event, function): Ini adalah metode utama untuk event handling. Metode ini menerima dua argumen utama:
- event: Nama event yang ingin didengarkan, ditulis sebagai string (contoh: "click", "mouseover", "keydown").
- function: Fungsi yang akan dijalankan (disebut *event handler* atau *callback function*) ketika event tersebut terjadi.
Event Populer: Ada banyak sekali jenis event, beberapa yang paling umum adalah click (saat diklik), mouseover (saat kursor mouse masuk ke area elemen), mouseout (saat kursor keluar), dan keydown (saat tombol keyboard ditekan).

💻 Contoh Kode:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Counter</title>
  </head>
  <body>
    <h1>Counter Sederhana</h1>
    <p>Nilai saat ini: <span id="nilai-counter">0</span></p>
    <button id="tombol-tambah">Tambah +</button>
    <button id="tombol-kurang">Kurang -</button>

    <script>
      // Memilih semua elemen yang dibutuhkan
      const elemenNilai = document.getElementById("nilai-counter");
      const tombolTambah = document.getElementById("tombol-tambah");
      const tombolKurang = document.getElementById("tombol-kurang");

      let nilai = 0; // Menyiapkan variabel untuk menyimpan nilai

      // Menambahkan event listener untuk tombol tambah
      tombolTambah.addEventListener("click", function () {
        nilai = nilai + 1; // Tambah nilai
        elemenNilai.innerText = nilai; // Update tampilan
        console.log("Nilai ditambah menjadi:", nilai);
      });

      // Menambahkan event listener untuk tombol kurang
      tombolKurang.addEventListener("click", function () {
        nilai = nilai - 1; // Kurangi nilai
        elemenNilai.innerText = nilai; // Update tampilan
        console.log("Nilai dikurang menjadi:", nilai);
      });
    </script>
  </body>
</html>

⚙️ Demo Interaktif:

<!DOCTYPE html>
<html>
<head>
  <title>Demo Event</title>
</head>
<body>
  <h1 id="judul">Judul Asli</h1>
  <p>Arahkan mouse ke judul di atas atau klik tombol di bawah!</p>
  <button id="tombolAksi">Klik Saya!</button>

// 2. Tambahkan event 'click' ke tombol
      tombol.addEventListener("click", function() {
        // Kode ini berjalan saat tombol diklik
        judul.innerText = "Anda Mengklik Tombol!";
      });

// 3. Tambahkan event 'mouseover' ke judul
      judul.addEventListener("mouseover", function() {
        // Kode ini berjalan saat mouse di atas judul
        judul.innerText = "Mouse Anda di sini!";
      });

// 4. Tambahkan event 'mouseout' ke judul
      judul.addEventListener("mouseout", function() {
        // Kode ini berjalan saat mouse keluar dari judul
        judul.innerText = "Mouse Anda Pergi!";
      });
    }
  </script>
</body>
</html>

💡 Tips: Anda bisa menggunakan fungsi yang sudah ada sebagai event handler, tidak harus selalu menulis fungsi baru di dalam `addEventListener`. Ini membuat kode lebih rapi!