Event Handling Dasar JS | Belajar JavaScript Dasar: Menghidupkan Web | Mahir.dev | Mahir.dev Academy

Event Handling Dasar JS | Belajar JavaScript Dasar: Menghidupkan Web | Mahir.dev | Mahir.dev Academy

Sintaks Dasar addEventListener():
javascript
```
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.

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!");
});

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.

Properti DOM (Event Handler Properties):

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

Contoh:

javascript

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.

javascript

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
    }
});