Event Click

Chapter sebelumnya mengajarkan cara memilih elemen DOM, mengubah teksnya, dan mengganti class-nya, tetapi seluruh perubahan itu berjalan sekali saat skrip dieksekusi. Halaman baru terasa hidup ketika ia merespons kejadian dari pengunjung: tombol ditekan, tautan disentuh, atau formulir dikirim. Browser memancarkan sinyal bernama event untuk setiap kejadian tersebut, dan JavaScript dapat mendaftar sebagai pendengar yang meresponsnya. Chapter ini membahas event yang paling sering dipakai, yaitu click, beserta pola pemasangan listener yang menjadi dasar hampir semua interaksi.

Event dan Callback #

Event adalah kejadian yang terjadi pada halaman, misalnya klik pada tombol, gerakan kursor, atau penekanan tombol keyboard. Browser terus memantau kejadian tersebut; ketika satu kejadian terjadi pada suatu elemen, browser menjalankan seluruh fungsi yang terdaftar sebagai pendengar (listener) untuknya. Fungsi yang didaftarkan ini disebut callback, karena browser yang memanggilnya kembali pada saat yang tepat, bukan kode kita yang memanggilnya langsung.

Cara modern untuk mendaftarkan listener adalah method addEventListener pada elemen:

const tombol = document.querySelector("#simpan");

tombol.addEventListener("click", function () {
  console.log("Tombol simpan ditekan!");
});

Method tersebut menerima dua argumen: string nama event ("click") dan fungsi callback yang akan dijalankan setiap kali event terjadi. Setiap penekanan tombol memicu pemanggilan callback kembali, dan satu elemen boleh memiliki banyak listener untuk event yang sama.

addEventListener atau Atribut onclick #

HTML menyediakan cara lain yang lebih tua, yaitu atribut onclick yang ditulis langsung pada tag:

<button type="button" onclick="tampilkanSalam()">Sapa pengunjung</button>

Dengan atribut tersebut, fungsi tampilkanSalam() dipanggil setiap tombol ditekan. Perilakunya benar, tetapi praktik ini menggabungkan perilaku ke dalam markup, seperti CSS inline: struktur dan logika bercampur dalam satu baris. Tabel berikut merangkum perbandingannya:

Listener yang dipasang lewat addEventListener menjaga pemisahan tanggung jawab tersebut. Gunakan atribut onclick hanya saat membaca kode lama milik orang lain.

Objek Event, this, dan target #

Setiap kali event terjadi, browser membuat satu objek event dan mengirimkannya sebagai argumen pertama callback. Objek ini lazim dinamai event atau disingkat e dan membawa keterangan tentang kejadian yang baru berlangsung:

tombol.addEventListener("click", function (event) {
  console.log(event.target.textContent);
});

Properti event.target menunjuk elemen tempat kejadian berasal — pada contoh di atas, tombolnya sendiri. Kata kunci this di dalam callback yang ditulis sebagai function biasa merujuk ke elemen yang dipasangi listener, sehingga pada kasus klik langsung this dan event.target berujung menunjuk objek yang sama. Kegunaan event.target yang berbeda dari this muncul pada event yang menyebar dari elemen anak ke elemen induk.

Contoh: Penghitung Klik #

Kita rangkai semuanya menjadi satu alat kecil: tombol penghitung yang memperbarui angka pada halaman setiap kali ditekan. File penghitung-klik.html menyediakan struktur dan tempat skrip dipasang:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Penghitung Klik</title>
  <script src="penghitung-klik.js" defer></script>
</head>
<body>
  <h1>Penghitung Klik</h1>
  <p>Tombol telah ditekan <span id="jumlah">0</span> kali.</p>
  <button id="tombol-tambah" type="button">Tambah satu</button>
</body>
</html>

Perilakunya ditulis di file terpisah penghitung-klik.js:

const tombol = document.querySelector("#tombol-tambah");
const jumlah = document.querySelector("#jumlah");
let hitungan = 0;

function tanganiKlik() {
  hitungan = hitungan + 1;
  jumlah.textContent = hitungan;
}

tombol.addEventListener("click", tanganiKlik);

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Heading "Penghitung Klik" dan kalimat "Tombol telah ditekan 0 kali."
  - Tombol berlabel "Tambah satu"
Setiap klik pada tombol:
  - Angka pada kalimat naik satu: 1, 2, 3, dan seterusnya

Mari kita bedah kedua file itu:

1. Baris 7 HTML (<script src="penghitung-klik.js" defer>): skrip dimuat dari file terpisah dengan atribut defer sehingga dieksekusi setelah dokumen selesai diurai — pola dari chapter Script dan Defer.
2. Baris 11-12 HTML (<span id="jumlah"> dan <button id="tombol-tambah">): dua elemen diberi id agar mudah dipilih dari JavaScript.
3. Baris 1-2 JS (querySelector): kode memilih tombol dan span, lalu menyimpan referensinya di dua const.
4. Baris 3 JS (let hitungan = 0;): nilai awal penghitung. let dipakai, bukan const, karena angka ini berubah; elemen yang tidak diganti tetap memakai const.
5. Baris 5-8 JS (function tanganiKlik): callback bernama yang menaikkan hitungan sebanyak satu, lalu menuliskan angka terbaru ke span melalui textContent — teknik dari chapter Mengubah Teks Elemen.
6. Baris 10 JS (addEventListener): menghubungkan tombol dengan callback. Setiap klik memicu pemanggilan tanganiKlik, sehingga angka pada halaman ikut naik.

Chapter berikutnya melanjutkan ke kejadian yang lebih halus: perubahan isian pada elemen form, yang terpicu bukan sekali per klik, melainkan setiap kali nilainya berganti.

Referensi resmi untuk pendalaman:

• MDN Web Docs — EventTarget: addEventListener()
• MDN Web Docs — Pengantar events (Learn)
• MDN Web Docs — Event
• MDN Web Docs — EventTarget: removeEventListener()

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Penghitung Klik</title>
  <script src="penghitung-klik.js" defer></script>
</head>
<body>
  <h1>Penghitung Klik</h1>
  <p>Tombol telah ditekan <span id="jumlah">0</span> kali.</p>
  <button id="tombol-tambah" type="button">Tambah satu</button>
</body>
</html>

const tombol = document.querySelector("#tombol-tambah");
const jumlah = document.querySelector("#jumlah");
let hitungan = 0;

function tanganiKlik() {
  hitungan = hitungan + 1;
  jumlah.textContent = hitungan;
}

tombol.addEventListener("click", tanganiKlik);