⚡🖱️

SERI BELAJAR JAVASCRIPT ARTIKEL 7 dari 14 BEGINNER FRIENDLY

Event & Interaksi:
Buat Halaman Web yang
Merespons Aksi Pengguna

Pelajari cara kerja event listener JavaScript untuk menciptakan interaksi web yang hidup — klik, ketik, geser, semua bisa kamu kendalikan!

⏱ 12 Menit

Estimasi Baca

🎯 Pemula

Level

📅 2026

Diperbarui

Pernah nggak kamu klik tombol di sebuah website, terus tiba-tiba muncul notifikasi, warnanya berubah, atau ada animasi keren yang langsung jalan? Kamu pasti bertanya-tanya: "Gimana caranya web bisa tahu kalau aku habis ngeklik?" Jawabannya ada di sini — event listener JavaScript adalah mekanisme ajaib yang membuat interaksi web menjadi mungkin. Tanpa event listener, halaman web kamu cuma jadi brosur digital yang pasif dan membosankan.

Di artikel ke-7 dari Seri Belajar JavaScript from Zero to Zorro ini, kita akan membedah habis konsep event & interaksi web — mulai dari apa itu event, bagaimana cara kerjanya di balik layar, sampai kamu bisa bikin halaman yang benar-benar responsif terhadap aksi pengguna. Siapkan editor kamu, karena kita akan langsung praktek! 🚀

📌 Definisi Penting

Event adalah segala sesuatu yang terjadi di halaman web — klik mouse, ketukan keyboard, scroll halaman, atau bahkan halaman yang baru selesai dimuat. Event Listener adalah "penjaga" yang kamu tugaskan untuk menunggu event tertentu terjadi, lalu menjalankan fungsi yang sudah kamu siapkan.

🧠 Apa Itu Event? Kenalan Dulu Sebelum Coding

Bayangkan kamu adalah kasir di sebuah kafe. Tugasmu adalah menunggu — menunggu pelanggan datang dan memesan. Begitu ada yang memesan, kamu langsung beraksi: catat pesanan, prosesin ke barista, kasih struk. Nah, inilah yang dilakukan event listener JavaScript dalam interaksi web!

Dalam analogi ini: kamu = event listener, pelanggan datang = event (klik, ketik, dsb.), dan kamu melayani = callback function yang dijalankan. Sederhana banget kan?

Kategori Event	Contoh Event	Kapan Terjadi?
🖱️ Mouse	`click, dblclick, mouseover, mouseout`	Saat pengguna berinteraksi dengan mouse
⌨️ Keyboard	`keydown, keyup, keypress`	Saat pengguna menekan/melepas tombol keyboard
📝 Form	`submit, change, focus, blur, input`	Saat pengguna mengisi atau submit form
📄 Window/Document	`load, scroll, resize, DOMContentLoaded`	Saat halaman atau jendela browser berubah
📱 Touch	`touchstart, touchend, touchmove`	Saat pengguna menyentuh layar (mobile)

🔥

FAKTA MENARIK

Setiap detiknya, jutaan event terjadi di halaman web yang kamu buka. Scroll, hover, klik — semua itu ditangkap dan diproses oleh JavaScript secara real-time tanpa perlu reload halaman. Itulah yang membuat web modern terasa seperti aplikasi sungguhan!

⚡ Cara Kerja Event Listener JavaScript: Panduan Lengkap

Ada tiga cara untuk menambahkan event handler di JavaScript. Kita akan bahas ketiganya — tapi spoiler: cara ketiga adalah yang paling profesional dan wajib kamu kuasai untuk membangun interaksi web yang solid.

Inline Event Handler (di HTML)

Cara paling lama — langsung tulis event di dalam tag HTML. Mudah dipahami, tapi tidak disarankan untuk proyek nyata karena mencampur HTML dan JavaScript.

<button onclick="alert('Halo!')">
  Klik Aku
</button>

Property Event Handler (di JavaScript)

Lebih baik dari cara pertama — handler ditaruh di JS. Tapi kelemahannya: kamu hanya bisa mendaftarkan satu handler per event per elemen.

const tombol = document.getElementById('tombolku');

tombol.onclick = function() {
  console.log('Diklik!');
};

addEventListener() — Cara Pro yang Wajib Dikuasai ✅

Cara terbaik! Fleksibel, bisa mendaftarkan banyak listener sekaligus, dan punya opsi untuk menghapus listener kapan pun.

// Sintaks dasar addEventListener
elemen.addEventListener('namaEvent', fungsiCallback);

// Contoh nyata — tombol berubah warna saat diklik
const tombol = document.getElementById('btn');

tombol.addEventListener('click', function() {
  tombol.style.backgroundColor = '#6366f1';
  tombol.style.color = 'white';
  tombol.textContent = '✅ Sudah Diklik!';
});

💡

TIPS PRO

Gunakan arrow function untuk kode yang lebih ringkas: tombol.addEventListener('click', () => { ... }). Hasilnya sama persis, tapi lebih modern dan singkat!

🎯 Objek Event: Data Tersembunyi di Balik Setiap Interaksi Web

Setiap kali event terjadi, JavaScript secara otomatis membuat sebuah objek event yang berisi semua informasi tentang event tersebut — siapa yang diklik, tombol keyboard mana yang ditekan, koordinat mouse, dan masih banyak lagi. Kamu bisa mengaksesnya lewat parameter pertama di callback function.

📄 script.js JavaScript

// Parameter 'e' adalah objek event (biasa diberi nama event, e, atau evt)
document.addEventListener('keydown', function(e) {
  console.log('Tombol ditekan:', e.key);
  console.log('Kode tombol:', e.code);
  console.log('Ctrl ditekan?', e.ctrlKey);
  console.log('Shift ditekan?', e.shiftKey);
});

// Contoh: Deteksi posisi klik mouse
document.addEventListener('click', function(e) {
  console.log(`Diklik di koordinat X: ${e.clientX}, Y: ${e.clientY}`);
  console.log('Elemen yang diklik:', e.target);
});

⚡

INSIGHT PENTING: e.target vs e.currentTarget

e.target = elemen yang benar-benar diklik (bisa elemen anak). e.currentTarget = elemen tempat listener dipasang. Ini penting saat kamu berurusan dengan event delegation!

Ada satu properti penting dari objek event yang sering dibutuhkan: preventDefault(). Method ini mencegah browser menjalankan perilaku defaultnya.

📄 form-prevent.js

// Mencegah form submit dan reload halaman
const form = document.querySelector('form');

form.addEventListener('submit', function(e) {
  e.preventDefault(); // ← Kunci utama!
  console.log('Form disubmit, tapi halaman tidak reload!');
  // Di sini kamu bisa validasi data, kirim via Fetch API, dll.
});

🛠️ Praktek Langsung: Bangun Komponen Interaktif dengan Event Listener

Teori sudah cukup. Sekarang kita bangun sesuatu yang nyata! Kita akan membuat Counter Interaktif — tombol tambah, kurang, dan reset — yang semuanya ditenagai event listener JavaScript. Ini adalah fondasi dari hampir semua aplikasi web modern.

Langkah-langkah Membangun Counter Interaktif

Buat Struktur HTML

<!-- index.html -->
<div id="counter-app">
  <h2 id="angka">0</h2>
  <button id="kurang">➖</button>
  <button id="reset">🔄 Reset</button>
  <button id="tambah">➕</button>
</div>

Tulis Logika JavaScript dengan Event Listener

// script.js
let count = 0;

const angka  = document.getElementById('angka');
const btnTambah = document.getElementById('tambah');
const btnKurang = document.getElementById('kurang');
const btnReset  = document.getElementById('reset');

function updateTampilan() {
  angka.textContent = count;
  angka.style.color = count > 0 ? '#10b981'
                   : count < 0 ? '#ef4444'
                   : '#1e293b';
}

btnTambah.addEventListener('click', () => {
  count++;
  updateTampilan();
});

btnKurang.addEventListener('click', () => {
  count--;
  updateTampilan();
});

btnReset.addEventListener('click', () => {
  count = 0;
  updateTampilan();
});

Coba di browser & amati hasilnya! ✅

Buka index.html di browser, klik tombol-tombolnya, dan lihat angka berubah secara dinamis — tanpa reload. Angka hijau = positif, merah = negatif. Itulah kekuatan event listener JavaScript dalam interaksi web!

⚠️

PERHATIAN

Selalu pastikan script JavaScript kamu dijalankan setelah elemen HTML ada di DOM! Taruh tag <script> di bawah body, atau gunakan DOMContentLoaded agar tidak error.

🚀 Event Delegation: Teknik Lanjutan untuk Interaksi Web yang Efisien

Bayangkan kamu punya 100 tombol dan harus memasang event listener di masing-masing. Boros banget, kan? Ada cara yang jauh lebih cerdas: Event Delegation. Prinsipnya: pasang satu listener di elemen induk, biarkan event "naik" ke atas (bubble up), lalu deteksi siapa yang mengaktifkannya.

📊 Perbandingan: Direct Listener vs Event Delegation

Aspek	Direct Listener	Event Delegation
Jumlah Listener	N listener (1 per elemen)	1 listener (di parent)
Elemen Dinamis (dibuat JS)	❌ Tidak Berfungsi	✅ Berfungsi
Performa	⚠️ Boros Memory	✅ Efisien
Cocok untuk	Elemen statis & sedikit	List dinamis, banyak elemen

📄 delegation.js — Event Delegation

// Satu listener untuk semua tombol di dalam #kontainer
const kontainer = document.getElementById('kontainer');

kontainer.addEventListener('click', function(e) {
  // Cek apakah yang diklik adalah tombol (bukan parent div)
  if (e.target.matches('button')) {
    console.log(`Tombol "${e.target.textContent}" diklik!`);
    e.target.style.background = '#6366f1';
    e.target.style.color = 'white';
  }
});

⚡

INSIGHT: Event Bubbling

Event delegation bisa bekerja karena ada mekanisme "event bubbling" — ketika event terjadi di elemen anak, event itu akan "naik" ke elemen-elemen induknya secara otomatis. Gunakan e.stopPropagation() kalau kamu ingin menghentikan proses naik ini.

🏁 Kesimpulan

Kita sudah menjelajahi dunia event listener JavaScript untuk interaksi web dari A sampai Z. Tiga hal besar yang harus kamu ingat:

addEventListener() adalah cara terbaik mendaftarkan event — fleksibel dan bisa dipasang banyak sekaligus.
Objek event menyimpan semua informasi tentang kejadian, termasuk siapa yang diklik, tombol apa yang ditekan, dan koordinat mouse.
Event Delegation adalah teknik pro yang membuat interaksi web kamu jauh lebih efisien, terutama untuk elemen dinamis.

Sekarang halaman web kamu bukan lagi sekadar brosur digital — melainkan pengalaman interaktif yang merespons setiap gerak dan aksi pengguna. Keren kan? 😄

📣 Punya pertanyaan atau hasil praktek counter-mu? Tulis di kolom komentar! Jangan lupa share artikel ini ke teman yang lagi belajar JavaScript — karena belajar bareng itu jauh lebih seru!

📚 Lihat Semua Artikel Seri Ini →

#javascript #eventListener #interaksiWeb #belajarJavaScript #webDevelopment #tutorial