JavaScript Jadi "Pendengar Setia": Merespon Aksi Pengguna Pake Event Handling!

Udah bisa ngoprek tampilan dan isi halaman HTML pake JavaScript? Keren banget! Tapi, semua perubahan itu kan baru jalan kalau kode JavaScript-nya dieksekusi pas halaman di-load. Gimana caranya biar JavaScript bisa ngerjain sesuatu sebagai respons terhadap aksi yang dilakuin sama pengguna? Misalnya, pas tombol diklik, pas mouse digerakin di atas gambar, atau pas pengguna selesai ngetik di form.

Nah, di sinilah Event Handling di JavaScript berperan! Event handling ini adalah mekanisme yang ngebolehin kita buat "ngedengerin" kejadian-kejadian (event) tertentu yang terjadi di halaman web, terus ngejalanin fungsi tertentu (disebut event handler atau event listener) sebagai responsnya.

Apa Itu Event? Kejadian-Kejadian di Halaman Web

Event adalah segala sesuatu yang terjadi di halaman web yang bisa dideteksi sama browser (dan JavaScript). Event ini bisa dipicu oleh:

• Aksi Pengguna:
  • Ngeklik mouse (click)
  • Ngerakin mouse di atas elemen (mouseover, mouseout)
  • Neken tombol keyboard (keydown, keyup, keypress)
  • Ngisi atau ngubah nilai di form input (input, change)
  • Nge-submit form (submit)
  • Nge-scroll halaman (scroll)
• Aksi Browser atau Sistem:
  • Halaman selesai di-load (load di objek window)
  • Gambar selesai di-load (load di elemen <img>)
  • Ukuran jendela browser diubah (resize di objek window)
  • Dan banyak lagi!

Setiap kali event ini terjadi pada sebuah elemen, kita bisa "nangkep" event itu dan nyuruh JavaScript buat ngelakuin sesuatu.

Cara "Ngedengerin" Event: Event Listener

Ada beberapa cara buat "masang" pendengar event ke elemen HTML, tapi cara yang paling modern, fleksibel, dan direkomendasikan adalah pake metode addEventListener().

• Sintaks Dasar addEventListener():

  elemenTarget.addEventListener('namaEvent', fungsiHandler, useCapture);

  • elemenTarget: Objek elemen HTML yang mau kita "pasangin kuping" (yang udah kita pilih pake getElementById, querySelector, dll.).
  • 'namaEvent' (String): Nama event yang mau kita dengerin, ditulis sebagai string dan tanpa awalan "on". Misalnya, 'click' (bukan 'onclick'), 'mouseover', 'keydown'.
  • fungsiHandler: Fungsi (bisa fungsi bernama atau fungsi anonim/arrow function) yang bakal dijalanin setiap kali namaEvent terjadi di elemenTarget. Fungsi ini sering disebut juga callback function.
  • useCapture (Opsional, Boolean): Ini parameter buat ngatur fase event (capturing vs bubbling). Buat pemula, biasanya kita biarin aja (defaultnya false, artinya pake fase bubbling). Kita gak bahas ini dulu ya biar gak pusing.

Contoh Penggunaan addEventListener():

HTML:

<button id="tombolSaya">Klik Aku Dong!</button>
<div id="kotakHasil" style="border:1px solid black; padding:10px; margin-top:10px;">Hasil akan muncul di sini...</div>
<input type="text" id="inputTeks" placeholder="Ketik sesuatu...">

JavaScript:

// 1. Pilih elemen targetnya dulu
let tombol = document.getElementById('tombolSaya');
let kotakHasil = document.getElementById('kotakHasil');
let inputTeks = document.getElementById('inputTeks');
 
// 2. Definisikan fungsi handler (apa yang mau dilakuin pas event terjadi)
function handleTombolKlik() {
    kotakHasil.textContent = "Tombolnya baru aja diklik! Hore!";
    console.log("Tombol diklik!");
}
 
function handleMouseMasukTombol() {
    tombol.style.backgroundColor = 'lightgreen';
    console.log("Mouse masuk ke area tombol.");
}
 
function handleMouseKeluarTombol() {
    tombol.style.backgroundColor = ''; // Kembalikan ke style default
    console.log("Mouse keluar dari area tombol.");
}
 
function handleInputKetik(event) { // Fungsi handler bisa nerima objek 'event'
    // event.target ngacu ke elemen yang micu event (yaitu inputTeks)
    kotakHasil.textContent = "Kamu mengetik: " + event.target.value;
}
 
// 3. Pasang event listener ke elemen target
tombol.addEventListener('click', handleTombolKlik); // Panggil handleTombolKlik pas tombol diklik
tombol.addEventListener('mouseover', handleMouseMasukTombol); // Panggil handleMouseMasukTombol pas mouse di atas tombol
tombol.addEventListener('mouseout', handleMouseKeluarTombol); // Panggil handleMouseKeluarTombol pas mouse keluar dari tombol
 
inputTeks.addEventListener('input', handleInputKetik); // Panggil handleInputKetik setiap kali nilai input berubah
 
// Bisa juga pake fungsi anonim atau arrow function langsung:
let paragrafBaru = document.createElement('p'); // Bikin elemen p baru (nanti dibahas)
paragrafBaru.textContent = "Ini paragraf baru, coba klik!";
document.body.appendChild(paragrafBaru); // Tambahin ke body
 
paragrafBaru.addEventListener('click', () => { // Pake arrow function
    alert("Paragraf baru diklik!");
});

Sekarang, kalau kamu buka halaman HTML-nya:

• Pas tombol "Klik Aku Dong!" diklik, teks di #kotakHasil bakal berubah.
• Pas mouse digerakin ke atas tombol, background tombol jadi hijau muda. Pas mouse keluar, backgroundnya balik lagi.
• Setiap kali kamu ngetik sesuatu di input field, teks di #kotakHasil bakal nunjukin apa yang kamu ketik.

Keren kan? JavaScript jadi bisa "dengerin" dan "ngerespon"!

Keuntungan Pake addEventListener():

• Kamu bisa nambahin beberapa event listener buat satu event yang sama di satu elemen.
• Kamu bisa ngapus event listener yang udah dipasang pake removeEventListener().
• Ngasih kontrol lebih baik atas fase event (capturing/bubbling, meskipun ini advance).
• Lebih bersih dan terorganisir dibanding cara lama (atribut HTML atau properti DOM).

Cara Lama (Kurang Direkomendasikan) Pasang Event Handler

Sebelum addEventListener() jadi standar, ada dua cara lama:

1. Atribut Event HTML:

   • Nulis kode JS langsung di atribut HTML kayak onclick, onmouseover, dll.
   • Contoh: <button onclick="alert('Tombol diklik!'); console.log('Klik dari atribut HTML');">Klik</button>
   • Kenapa dihindari? Mencampuradukkan HTML dan JavaScript, susah di-maintain buat kode yang kompleks.

2. Properti DOM (Event Handler Properties):

   • Ngasih fungsi ke properti event di objek elemen (nama propertinya pake awalan "on").
   • Contoh:

     let tombolLama = document.getElementById('tombolLama');
     tombolLama.onclick = function() { // Perhatiin nama propertinya: onclick
         console.log("Tombol lama diklik via properti DOM.");
     };
     // PENTING: Kalau kamu ngasih fungsi baru ke properti ini, dia bakal NIMPA fungsi handler sebelumnya.
     // tombolLama.onclick = function() { console.log("Handler baru, yang lama ilang!"); }; 

   • Kenapa kurang ideal? Kamu cuma bisa masang satu fungsi handler per event per elemen pake cara ini. addEventListener() lebih fleksibel.

Kesimpulan: Buat JavaScript modern, selalu usahakan pake addEventListener() buat nanganin event.

Objek event di Fungsi Handler

Pas sebuah event terjadi dan fungsi handler-mu dipanggil, browser secara otomatis bakal ngasih satu argumen ke fungsi handler itu: sebuah objek event. Objek ini isinya banyak banget informasi berguna soal event yang baru aja terjadi.

Beberapa properti objek event yang sering dipake:

• event.target: Ngacu ke elemen HTML yang sebenernya micu event itu. Berguna banget kalau kamu masang satu event listener di elemen parent tapi pengen tau anak mana yang sebenernya diklik (ini namanya event delegation, topik advance).
• event.type: String yang isinya nama event-nya (misal, "click", "mouseover").
• event.preventDefault(): Metode ini penting banget! Kalau dipanggil, dia bakal mencegah perilaku default browser buat event tertentu.
  • Contoh: Kalau event submit di form dipanggil event.preventDefault(), form-nya gak bakal jadi ke-submit ke server (berguna kalau kamu mau validasi pake JS dulu atau ngirim data pake AJAX).
  • Contoh: Kalau event click di link <a> dipanggil event.preventDefault(), link-nya gak bakal jadi pindah halaman.
• event.stopPropagation(): Mencegah event "merambat" (bubbling) ke elemen parent-nya. (Ini juga topik advance).
• Buat event keyboard (keydown, keyup): event.key (nama tombol yang ditekan, misal "a", "Enter", "ArrowUp"), event.code (kode fisik tombol), event.altKey, event.ctrlKey, event.shiftKey (boolean, apakah tombol Alt/Ctrl/Shift lagi diteken).
• Buat event mouse (click, mousemove): event.clientX, event.clientY (posisi kursor relatif ke viewport), event.pageX, event.pageY (posisi kursor relatif ke dokumen).

Contoh pake event.target dan event.preventDefault():

let formContoh = document.getElementById('formSaya'); // Anggap ada <form id="formSaya">
let inputNamaForm = document.getElementById('namaDiForm'); // Anggap ada <input id="namaDiForm">
 
if (formContoh) {
    formContoh.addEventListener('submit', function(event) {
        event.preventDefault(); // CEGAH FORM DI-SUBMIT SECARA NORMAL!
        
        let namaYangDiinput = inputNamaForm.value;
        if (namaYangDiinput === "") {
            alert("Nama tidak boleh kosong!");
        } else {
            alert("Halo, " + namaYangDiinput + "! Form (pura-puranya) berhasil dikirim.");
            // Di sini kamu bisa lanjut ngirim data pake AJAX atau ngelakuin hal lain
        }
    });
}
 
document.getElementById('linkGoogle').addEventListener('click', function(e) { // 'e' itu nama umum buat objek event
    if (!confirm("Yakin mau pindah ke Google?")) { // Fungsi confirm() nampilin dialog OK/Cancel
        e.preventDefault(); // Kalau user klik Cancel, cegah linknya kebuka
    }
});

Event Umum yang Sering Dipake

• Mouse Events:
  • click: Pas elemen diklik.
  • dblclick: Pas elemen diklik dua kali cepet.
  • mousedown: Pas tombol mouse diteken di atas elemen.
  • mouseup: Pas tombol mouse dilepas di atas elemen.
  • mousemove: Pas kursor mouse gerak di atas elemen.
  • mouseover: Pas kursor mouse pertama kali masuk ke area elemen.
  • mouseout: Pas kursor mouse keluar dari area elemen.
  • contextmenu: Pas tombol kanan mouse diklik di elemen (mencegah menu konteks default).
• Keyboard Events:
  • keydown: Pas tombol keyboard diteken.
  • keyup: Pas tombol keyboard dilepas.
  • keypress: (Agak deprecated, fokus ke keydown/keyup) Pas karakter dihasilkan.
• Form Events:
  • submit: Pas form di-submit (biasanya di elemen <form>).
  • change: Pas nilai elemen input form berubah DAN elemen itu kehilangan fokus (misal, pindah ke field lain). Buat <select>, checkbox, radio, ini langsung jalan pas nilainya berubah.
  • input: Pas nilai elemen <input> atau <textarea> berubah (langsung jalan pas ngetik). Ini lebih responsif daripada change buat field teks.
  • focus: Pas elemen dapet fokus.
  • blur: Pas elemen kehilangan fokus.
• Window/Document Events:
  • load (di window): Pas seluruh halaman (termasuk gambar, stylesheet, dll.) selesai di-load.
  • DOMContentLoaded (di document): Pas struktur HTML dasar udah selesai di-load dan di-parse (DOM siap), tapi gambar atau resource lain mungkin belum. Ini lebih cepet dari window.load dan sering dipake buat ngejalanin skrip inisialisasi.
  • resize (di window): Pas ukuran jendela browser diubah.
  • scroll (di window atau elemen yang bisa di-scroll): Pas halaman atau elemen di-scroll.

Event handling ini adalah "roti dan mentega"-nya interaktivitas web pake JavaScript. Dengan addEventListener dan objek event, kamu bisa bikin halaman web yang bener-bener "ngobrol" sama penggunanya.

Pahami event apa aja yang ada, gimana cara masang listener, dan gimana cara ngambil info dari objek event. Ini bakal jadi skill yang kepake terus-terusan!