Event Object: Mendapatkan Data dari Event (e.target, e.key).

Setiap kali sebuah Event terjadi (seperti klik atau ketikan), JavaScript tidak hanya menjalankan fungsi, tetapi juga mengirimkan sebuah "paket data" otomatis yang disebut Event Object.

Biasanya, kita menangkap paket data ini dengan memberikan parameter (seringkali dinamai e, evt, atau event) pada fungsi callback kita.

1. Apa Itu Event Object?

Event Object adalah sebuah objek yang berisi semua informasi detail tentang kejadian yang baru saja berlangsung. Informasi ini bisa berupa koordinat kursor mouse, tombol keyboard yang ditekan, hingga elemen spesifik mana yang disentuh pengguna.

2. Mengenal e.target

e.target adalah salah satu properti paling penting. Ia merujuk pada elemen HTML yang memicu event tersebut.

• Kegunaan: Mengambil nilai input, mengubah warna elemen yang diklik dalam sebuah daftar, atau mengetahui ID dari tombol yang ditekan.

• Contoh Kasus: Mengambil teks dari tombol yang diklik.

const daftarTombol = document.querySelectorAll('.btn'); daftarTombol.forEach(tombol => { tombol.addEventListener('click', (e) => { // e.target adalah tombol spesifik yang diklik console.log("Anda mengklik tombol: " + e.target.innerText); e.target.style.backgroundColor = "green"; });
});

3. Mengenal e.key dan e.code

Saat bekerja dengan event keyboard (keydown atau keyup), Event Object memberi tahu kita tombol mana yang ditekan melalui properti e.key.

• e.key: Mengembalikan nilai karakter tombol (misal: "a", "Enter", "ArrowUp").

• e.code: Mengembalikan kode fisik tombol (misal: "KeyA", "Digit1").

Contoh Kasus: Menjalankan perintah saat tombol Enter ditekan.

const inputSearch = document.querySelector('#search'); inputSearch.addEventListener('keydown', (e) => { if (e.key === 'Enter') { console.log("Memulai pencarian untuk: " + e.target.value); }
});

4. Properti Penting Lainnya

Selain target dan key, berikut adalah beberapa properti yang sering digunakan dalam pengembangan aplikasi:

5. Tutorial Praktis: Delegasi Event

Bayangkan Anda punya banyak kotak dan ingin tahu kotak mana yang diklik tanpa memasang listener di setiap kotak. Kita bisa memanfaatkan e.target.

const container = document.querySelector('.container'); container.addEventListener('click', (e) => { // Mengecek apakah yang diklik adalah elemen dengan class 'box' if (e.target.classList.contains('box')) { alert("Ini adalah kotak nomor: " + e.target.id); }
});

Ringkasan

1. Event Object (e) adalah gudang data tentang apa yang dilakukan pengguna.

2. e.target digunakan untuk menunjuk langsung "siapa" elemen yang berinteraksi.

3. e.key digunakan untuk mendeteksi "apa" yang ditekan pada keyboard.

4. Gunakan e.preventDefault() untuk memegang kendali penuh atas perilaku elemen (seperti tag <a> agar tidak berpindah halaman).

Dengan menguasai Event Object, Anda bisa membuat aplikasi yang jauh lebih cerdas karena program Anda sekarang tahu persis detail dari setiap tindakan pengguna!