Event Listener: Memberikan Telinga dan Kepekaan pada Website

Halo Sobat Jurnal Coding! Kita sudah mempelajari banyak sekali logika internal (seperti Variabel, Object, dan Perulangan) yang membuat program menjadi cerdas di balik layar. Namun, sebuah website yang cerdas tidak akan ada gunanya jika ia tidak peka terhadap lingkungannya.

Sebuah website modern harus tahu kapan pengunjung menekan tombol "Kirim", harus tahu kapan pengunjung mengarahkan kursor mouse ke sebuah foto, dan harus tahu kapan pengunjung menggulir ( scroll ) layar ke bawah untuk memunculkan animasi.

Lalu, bagaimana cara sebaris kode kaku bisa "merasakan" sentuhan fisik dari manusia? Di situlah kita menggunakan sihir JavaScript yang diberi nama: Event Listener (Pendengar Peristiwa).

### Analogi Satpam Tuli vs Satpam Waspada

Bayangkan kamu memiliki sebuah tombol HTML di website-mu yang bertuliskan "Klik Saya". Tombol itu ibarat sebuah pintu gerbang.

Jika kamu tidak memasang Event Listener, pintu gerbang itu dijaga oleh seorang Satpam yang sedang tidur lelap memakai penutup telinga ( earplug ). Mau pengunjung mengetuk pintu itu ribuan kali, menggedornya, atau menendangnya, sang Satpam tidak akan bereaksi sama sekali. Website-mu akan diam seperti batu.

Sekarang, kita lepaskan penutup telinga sang Satpam dan kita berikan dia instruksi yang sangat tegas menggunakan JavaScript: "Hei Satpam, tolong pasang telingamu baik-baik di pintu ini. JIKA ada yang melakukan aksi KLIK pada pintu ini, segera bunyikan alarm!"

Di dalam JavaScript, instruksi "pasang telinga" ini diterjemahkan menjadi kode addEventListener.

// 1. Tangkap dulu elemen HTML-nya (Pintu Gerbang)

const tombolPintu = document.getElementById("tombol-utama");

// 2. Pasang Telinga (Event Listener) pada tombol tersebut

tombolPintu.addEventListener("click", function() {

    // 3. Ini adalah aksi yang terjadi JIKA tombol diklik

    alert("Pintu telah dibuka! Selamat datang di markas Jurnal Coding.");

    tombolPintu.innerText = "Sudah Diklik!";

});

### Tidak Hanya Sekadar Klik!

Banyak pemula mengira Event Listener hanya berlaku untuk mengeklik tombol. Padahal, kemampuannya jauh lebih luas dan mengagumkan dari itu! Browser komputermu merekam puluhan jenis "peristiwa" setiap detiknya.

Berikut adalah beberapa jenis Event (peristiwa) paling populer yang bisa didengarkan oleh JavaScript:

1. mouseenter dan mouseleave :
Sistem ini akan bereaksi saat kursor mouse pengunjung baru saja "menyentuh" permukaan tombol (tanpa diklik), dan bereaksi lagi saat kursor pergi menjauh. Efek ini sangat sering dipakai di website toko online untuk melakukan zoom-in otomatis pada foto sepatu atau baju saat mouse diarahkan ke fotonya.

2. keydown dan keyup :
Sistem ini memasang telinga langsung pada keyboard komputermu. Kamu bisa membuat program rahasia, misalnya: JIKA pengunjung menekan tombol huruf "A" di keyboard, munculkan foto kucing. Teknologi inilah yang dipakai untuk membuat game di web browser di mana karakter bisa berjalan menggunakan tombol W, A, S, D!

3. scroll :
Sistem ini memasang telinga pada roda mouse. Setiap kali halaman digeser ke bawah, program bisa bereaksi. Ini adalah rahasia di balik bilah navigasi ( header ) yang tiba-tiba berubah warna menjadi gelap saat kamu membaca artikel panjang ke bawah.

### Kenapa Ini Mengubah Hidupmu?

Memahami addEventListener adalah momen di mana kamu secara resmi berubah dari seorang pembuat halaman dokumen statis menjadi seorang pembuat Aplikasi Interaktif.

Dengan menggabungkan kemampuan DOM (memanipulasi HTML) dan Event Listener (mendengarkan interaksi), kamu kini memiliki kekuatan setara dengan developer profesional yang bekerja di raksasa teknologi.

Sebagai pemanasan, cobalah buat sebuah kotak di Text Editor-mu. Pasang event listener mouseenter padanya, dan buat warnanya berubah seketika saat tersentuh oleh mouse. Setelah kamu takjub melihat hasilnya, mari kita uji kemampuan penuhmu di artikel selanjutnya dengan membangun proyek yang paling diminati umat manusia saat ini: Tombol Dark Mode!