Masukkan Password
42 Metode addEventListener()
Lecture ini sangat penting karena kita sekarang masuk ke cara ketiga dan yang paling fleksibel untuk menangani event di JavaScript, yaitu:
addEventListener()
Kalau sebelumnya kita belajar:
- Inline event handler
- Event handler property
addEventListener()← lecture ini
Mari kita bahas dari dasar sampai benar-benar jelas.
1. Gambaran besar: apa yang sebenarnya kita pelajari?
Tujuan akhirnya sederhana:
Ketika sesuatu terjadi pada halaman, JavaScript melakukan sesuatu sebagai respons.
Misalnya:
User menggerakkan mouse ke header
↓
mouseover event
↓
addEventListener mendeteksi
↓
callback function dijalankan
↓
warna header → hitam
Ketika mouse keluar:
Mouse keluar dari header
↓
mouseout event
↓
addEventListener mendeteksi
↓
callback function dijalankan
↓
warna header → putih
Jadi inti addEventListener() adalah:
“Element ini, tolong dengarkan event tertentu. Kalau event tersebut terjadi, jalankan function ini.”
2. Mengingat kembali: apa itu event?
Sebelum memahami addEventListener, kita harus ingat konsep event.
Event = sesuatu yang terjadi.
Contohnya:
click
mouseover
mouseout
focus
keydown
keyup
submit
change
input
Misalnya:
User klik tombol
↓
click
Atau:
Mouse masuk ke header
↓
mouseover
Atau:
Mouse keluar dari header
↓
mouseout
3. Tiga cara menangani event
Sekarang kita sudah punya tiga cara:
┌─────────────────────────────┐
│ 1. Inline event handler │
│ 2. Event handler property │
│ 3. addEventListener() │
└─────────────────────────────┘
Contoh satu event click:
Cara 1 — Inline
<button onclick="sayHello()">
Click
</button>
Cara 2 — Event handler property
button.onclick = function() {
sayHello();
};
Cara 3 — addEventListener
button.addEventListener("click", function() {
sayHello();
});
Lecture ini fokus pada nomor 3.
4. Mulai dari contoh lecture
Di HTML terdapat:
<header>
Welcome to our website
</header>
Kita ingin:
Normal:
header → putih
Mouse masuk:
header → hitam
Mouse keluar:
header → putih lagi
Secara visual:
MOUSE TIDAK DI ATAS
↓
"Welcome to our website"
PUTIH
Mouse masuk
↓
"Welcome to our website"
HITAM
Mouse keluar
↓
"Welcome to our website"
PUTIH
5. Langkah pertama: ambil element dari DOM
Sama seperti lecture sebelumnya, pertama kita perlu mengambil element.
Karena kita memiliki:
<header>
kita bisa menggunakan:
let header = document.querySelector("header");
Ingat:
document.querySelector()
mencari element menggunakan CSS selector.
Karena kita ingin mencari tag:
<header>
kita cukup menulis:
"header"
Tidak perlu:
"#header"
karena # digunakan untuk ID.
Dan tidak perlu:
".header"
karena . digunakan untuk class.
Jadi:
let header = document.querySelector("header");
artinya:
“Cari element
<header>dari DOM dan simpan object tersebut ke variabelheader.”
6. Apa isi variabel header?
Variabel:
header
menyimpan DOM object yang merepresentasikan element <header>.
Gambaran sederhananya:
HTML
↓
<header>Welcome...</header>
↓
Browser membuat DOM
↓
DOM object
↓
header
Karena header adalah object DOM, kita bisa menggunakan property dan method miliknya.
Misalnya:
header.textContent
atau:
header.style
atau sekarang:
header.addEventListener()
7. Apa itu addEventListener()?
Sekarang masuk ke inti lecture.
Kita menulis:
header.addEventListener(...)
addEventListener() adalah method milik DOM object yang digunakan untuk mendengarkan event.
Secara sederhana:
header.addEventListener()
↓
"Header, dengarkan sebuah event."
Tetapi kita harus memberitahu:
“Event apa yang harus kamu dengarkan?”
Dan:
“Kalau event itu terjadi, harus melakukan apa?”
Karena itu addEventListener() menerima argument.
Bentuk dasarnya:
element.addEventListener("event", callbackFunction);
Contoh:
header.addEventListener("mouseover", function() {
// lakukan sesuatu
});
8. Ada dua bagian penting dalam addEventListener()
Perhatikan:
header.addEventListener("mouseover", function() {
header.style.color = "black";
});
Ada dua argument:
Argument pertama
"mouseover"
Ini memberitahu:
Event apa yang ingin didengarkan?
Argument kedua
function() {
header.style.color = "black";
}
Ini memberitahu:
Apa yang harus dilakukan ketika event tersebut terjadi?
Jadi:
addEventListener(
"event yang didengarkan",
"function yang dijalankan"
)
9. Kenapa tidak ada on?
Ini salah satu hal paling penting dari lecture ini.
Kalau menggunakan event handler property, kita menulis:
header.onmouseover = function() {
...
};
Ada:
on + mouseover
Tetapi kalau menggunakan addEventListener():
header.addEventListener("mouseover", function() {
...
});
kita menulis:
mouseover
tanpa on.
Jadi:
┌──────────────────────────────┐
│ Inline │
│ onclick │
├──────────────────────────────┤
│ Event handler property │
│ element.onclick │
├──────────────────────────────┤
│ addEventListener │
│ "click" │
└──────────────────────────────┘
Contoh:
button.onclick = ...
tetapi:
button.addEventListener("click", ...)
Bukan:
button.addEventListener("onclick", ...)
❌ Salah.
10. Membuat mouseover handler
Sekarang kita implementasikan contoh lecture.
let header = document.querySelector("header");
header.addEventListener("mouseover", function() {
header.style.color = "black";
});
Mari baca seperti bahasa manusia:
“Ambil header. Tambahkan listener untuk event
mouseover. Kalau mouseover terjadi, jalankan function yang mengubah warna header menjadi hitam.”
11. Apa itu callback function di sini?
Function:
function() {
header.style.color = "black";
}
adalah callback function.
Kita sudah belajar callback di lecture sebelumnya.
Callback = function yang diberikan kepada function/method lain untuk dipanggil kemudian ketika kondisi tertentu terjadi.
Di sini:
header.addEventListener(
"mouseover",
function() {
header.style.color = "black";
}
);
function tersebut tidak langsung dijalankan.
Browser akan menjalankannya ketika:
mouseover
terjadi.
12. Urutan eksekusinya
Ketika JavaScript membaca:
header.addEventListener("mouseover", function() {
header.style.color = "black";
});
bukan berarti:
langsung ubah warna menjadi hitam
Tetapi:
JavaScript:
"Kalau nanti terjadi mouseover pada header,
jalankan function ini."
Kemudian beberapa saat kemudian:
User menggerakkan mouse
↓
Mouse masuk/berada di header
↓
mouseover event terjadi
↓
addEventListener mendeteksi
↓
callback function dijalankan
↓
header.style.color = "black"
↓
header berubah menjadi hitam
13. Kemudian kita butuh mouseout
Masalahnya sekarang:
Mouse masuk
↓
warna menjadi hitam
Mouse keluar
↓
warna masih hitam
Kenapa?
Karena kita hanya menangani:
"mouseover"
Kita belum menangani:
"mouseout"
Maka kita tambahkan listener kedua.
header.addEventListener("mouseout", function() {
header.style.color = "white";
});
Sekarang lengkap:
let header = document.querySelector("header");
header.addEventListener("mouseover", function() {
header.style.color = "black";
});
header.addEventListener("mouseout", function() {
header.style.color = "white";
});
14. Alur lengkapnya
Sekarang ada dua listener:
HEADER
│
┌─────────┴─────────┐
↓ ↓
mouseover mouseout
↓ ↓
warna hitam warna putih
Secara urutan:
START
↓
Header putih
↓
Mouse masuk header
↓
mouseover
↓
Callback #1 jalan
↓
Header → hitam
↓
Mouse keluar header
↓
mouseout
↓
Callback #2 jalan
↓
Header → putih
15. Kenapa disebut “add” Event Listener?
Nama method-nya:
addEventListener()
Perhatikan kata:
add
Artinya kita menambahkan listener ke element.
Misalnya:
header.addEventListener("mouseover", ...);
Kita menambahkan listener untuk mouseover.
Lalu:
header.addEventListener("mouseout", ...);
Kita menambahkan listener lain untuk mouseout.
Jadi satu element dapat memiliki banyak event listener.
16. Ini salah satu kelebihan besar addEventListener()
Misalnya kita ingin satu tombol melakukan beberapa hal ketika diklik.
Dengan addEventListener() kita bisa menambahkan beberapa listener:
button.addEventListener("click", function() {
console.log("First listener");
});
button.addEventListener("click", function() {
console.log("Second listener");
});
Ketika button diklik, kedua callback dapat dijalankan.
Click
↓
listener 1 → "First listener"
↓
listener 2 → "Second listener"
Ini berbeda dengan:
button.onclick = ...
karena property onclick hanya memiliki satu nilai handler pada satu waktu; assignment berikutnya akan menggantikan handler sebelumnya.
Ini salah satu alasan addEventListener() lebih fleksibel.
17. Perbandingan tiga cara event handling
Sekarang kita bandingkan semuanya.
A. Inline event handler
<button onclick="sayHello()">
Click
</button>
Event ditulis di HTML.
B. Event handler property
button.onclick = function() {
sayHello();
};
Event ditangani melalui property DOM object.
C. addEventListener()
button.addEventListener("click", function() {
sayHello();
});
Event ditambahkan menggunakan method addEventListener().
18. Perbedaan syntax yang harus kamu hafal
Ini cheat sheet yang sangat berguna:
| Cara | Syntax |
|---|---|
| Inline | onclick="..." |
| Property | element.onclick = ... |
| addEventListener | element.addEventListener("click", ...) |
Perhatikan perbedaan on.
Inline:
onclick
Property:
onclick
addEventListener:
"click"
Jadi:
button.addEventListener("onclick", ...)
❌ Jangan.
Yang benar:
button.addEventListener("click", ...)
19. addEventListener() dan anonymous function
Lecture menggunakan:
header.addEventListener("mouseover", function() {
header.style.color = "black";
});
Function-nya anonymous:
function() {
...
}
Karena function tersebut langsung diberikan sebagai callback.
Tetapi sebenarnya callback tidak harus anonymous.
Kita juga bisa membuat named function:
function makeBlack() {
header.style.color = "black";
}
header.addEventListener("mouseover", makeBlack);
Ini juga valid.
Bedakan:
header.addEventListener("mouseover", makeBlack);
dengan:
header.addEventListener("mouseover", makeBlack());
Yang benar:
makeBlack
karena kita memberikan function kepada event listener.
Bukan:
makeBlack()
karena itu menjalankan function langsung.
20. Connection dengan lecture Callback Function
Ini sebenarnya menghubungkan beberapa lecture sebelumnya.
Kita sudah belajar:
Function adalah value.
Karena function adalah value, kita bisa memberikan function sebagai argument.
Contohnya:
setTimeout(function() {
console.log("Hello");
}, 1000);
Sekarang:
header.addEventListener("mouseover", function() {
console.log("Mouse over");
});
Konsepnya sama.
addEventListener()
↓
menerima function
↓
function disimpan sebagai callback
↓
event terjadi
↓
callback dijalankan
Jadi lecture addEventListener() ini sebenarnya merupakan penerapan langsung dari konsep callback function yang sudah kita pelajari.
21. Connection dengan DOM
Kita juga menggabungkan beberapa konsep sekaligus:
Dari DOM:
document.querySelector("header")
mengambil element.
Dari object/property:
header.style.color
mengubah style.
Dari function:
function() {
...
}
membuat function.
Dari callback:
addEventListener(..., function() {})
memberikan function sebagai callback.
Dari event:
mouseover
mouseout
merespons interaksi user.
Jadi lecture ini sebenarnya menggabungkan banyak konsep yang sudah kamu pelajari.
22. Contoh lengkap
Misalnya HTML:
<header>
Welcome to My Website
</header>
JavaScript:
let header = document.querySelector("header");
header.addEventListener("mouseover", function() {
header.style.color = "black";
});
header.addEventListener("mouseout", function() {
header.style.color = "white";
});
Hasilnya:
Kondisi awal
↓
Header putih
Mouse masuk
↓
mouseover
↓
Header hitam
Mouse keluar
↓
mouseout
↓
Header putih
23. Ada satu istilah yang perlu kamu pahami: “register”
Ketika kita menulis:
header.addEventListener("mouseover", function() {
...
});
kita sebenarnya sedang mendaftarkan/register callback untuk event tertentu.
Bisa dibayangkan seperti daftar tugas:
HEADER
Event: mouseover
Handler: function #1
Event: mouseout
Handler: function #2
Browser kemudian tahu:
“Kalau mouseover terjadi pada header, panggil function #1.”
“Kalau mouseout terjadi pada header, panggil function #2.”
24. Analogi yang mudah: satpam
Bayangkan ada sebuah gedung bernama Header.
Kita memiliki dua satpam.
Satpam 1
header.addEventListener("mouseover", function() {
...
});
Tugasnya:
“Kalau ada orang masuk, lakukan sesuatu.”
Satpam 2
header.addEventListener("mouseout", function() {
...
});
Tugasnya:
“Kalau ada orang keluar, lakukan sesuatu.”
Jadi:
HEADER
│
┌──────────┴──────────┐
↓ ↓
mouseover mouseout
↓ ↓
SATPAM 1 SATPAM 2
↓ ↓
callback callback
addEventListener() seperti mendaftarkan satpam untuk mengawasi kejadian tertentu.
25. Event listener vs event handler
Ini masih sering membingungkan.
Misalnya:
header.addEventListener("mouseover", function() {
header.style.color = "black";
});
Kita bisa memahaminya seperti ini:
Event
mouseover
Mouse berada/masuk ke area header.
Event listener
addEventListener("mouseover", ...)
Dengarkan
mouseoverpada header.
Event handler/callback
function() {
header.style.color = "black";
}
Kode yang dijalankan ketika event terjadi.
Jadi:
EVENT
↓
"mouseover"
↓
LISTENER
↓
addEventListener(...)
↓
HANDLER / CALLBACK
↓
function() {
header.style.color = "black";
}
26. addEventListener() tidak hanya untuk mouse
Ini juga disebutkan di lecture.
Kita bisa menggunakannya untuk banyak event.
Click
button.addEventListener("click", function() {
console.log("Button clicked");
});
Focus
input.addEventListener("focus", function() {
console.log("Input focused");
});
Input
input.addEventListener("input", function() {
console.log("User is typing");
});
Keyboard
document.addEventListener("keydown", function() {
console.log("Keyboard pressed");
});
Submit
form.addEventListener("submit", function() {
console.log("Form submitted");
});
Jadi addEventListener() sangat general.
27. Jangan menggunakan on pada addEventListener
Sekali lagi karena ini sering menjadi kesalahan pemula:
❌ Salah:
button.addEventListener("onclick", function() {
...
});
❌ Salah:
button.addEventListener("onmouseover", function() {
...
});
✅ Benar:
button.addEventListener("click", function() {
...
});
✅ Benar:
button.addEventListener("mouseover", function() {
...
});
Kenapa?
Karena:
on...
digunakan pada inline handler dan event handler property.
Sedangkan addEventListener() menggunakan nama event sebenarnya.
28. Perhatikan penggunaan style
Dalam contoh lecture:
header.style.color = "black";
Kita sedang mengubah inline style dari element.
Ini merupakan materi dari lecture DOM manipulation sebelumnya.
Misalnya CSS:
header {
color: white;
}
Kemudian JavaScript:
header.style.color = "black";
JavaScript akan memberikan style inline pada element tersebut.
Secara konsep menjadi:
<header style="color: black;">
Untuk mengembalikannya:
header.style.color = "white";
29. Cara berpikir yang bagus saat melihat addEventListener
Kalau kamu menemukan kode:
element.addEventListener("event", callback);
langsung pecah menjadi tiga pertanyaan:
Pertanyaan 1
Element mana yang diawasi?
element
Pertanyaan 2
Event apa yang didengarkan?
"event"
Pertanyaan 3
Apa yang dilakukan ketika event terjadi?
callback
Misalnya:
button.addEventListener("click", function() {
alert("Hello");
});
Jawab:
Element:
button
Event:
click
Handler:
alert("Hello")
30. Kesalahan yang sering dilakukan pemula
❌ 1. Menulis onclick di addEventListener
button.addEventListener("onclick", ...)
Harus:
button.addEventListener("click", ...)
❌ 2. Menjalankan function langsung
Misalnya:
function sayHello() {
console.log("Hello");
}
Jangan:
button.addEventListener("click", sayHello());
Karena sayHello() langsung dijalankan.
Yang benar:
button.addEventListener("click", sayHello);
❌ 3. Lupa mengambil element
Misalnya langsung:
button.addEventListener(...)
padahal button belum dibuat.
Kita harus punya:
let button = document.querySelector(".button");
baru:
button.addEventListener(...)
❌ 4. Salah nama event
Misalnya:
"mouse-over"
Padahal event-nya:
"mouseover"
Begitu juga:
mouseout
click
focus
input
keydown
Nama event harus benar.
31. Perbandingan lengkap tiga metode
| Inline | Event Handler Property | addEventListener() | |
|---|---|---|---|
| Ditulis di | HTML | JavaScript | JavaScript |
| Contoh | onclick="..." | button.onclick = ... | button.addEventListener("click", ...) |
Pakai on? | ✅ | ✅ | ❌ |
| Bisa banyak handler untuk event yang sama? | Tidak ideal | ❌ satu property | ✅ |
| Fleksibilitas | Rendah | Sedang | Tinggi |
| Cocok untuk aplikasi besar | Kurang | Kurang ideal | ✅ |
| Umum di JavaScript modern | Kurang | Masih ada | ✅ |
Untuk proyek nyata, biasanya kamu akan lebih sering menemukan:
element.addEventListener(...)
32. Satu hal penting: listener tidak menunggu secara blocking
Misalnya:
button.addEventListener("click", function() {
console.log("Clicked");
});
console.log("Program continues");
Ketika JavaScript menjalankan:
button.addEventListener(...)
JavaScript tidak berhenti menunggu user klik.
Dia hanya mendaftarkan listener.
Kemudian program lanjut:
console.log("Program continues");
Nanti, kalau user benar-benar klik button, browser akan menjalankan callback.
Jadi konsepnya:
JavaScript:
"Pasang listener."
↓
Lanjut menjalankan kode lain
↓
...
↓
User klik
↓
Browser menjalankan callback
Ini sangat berkaitan dengan konsep event-driven JavaScript yang sudah kita pelajari.
33. Peta konsep lecture ini
Coba simpan diagram ini:
DOM ELEMENT
│
↓
document.querySelector()
│
↓
DOM object
│
↓
addEventListener()
│
┌───────┴────────┐
↓ ↓
EVENT CALLBACK
↓ ↓
"mouseover" function() {...}
"mouseout" │
"click" ↓
dijalankan
ketika event
terjadi
34. Hubungkan dengan semua lecture sebelumnya
Kalau kita lihat perjalanan belajarmu sampai sini:
VARIABLE
↓
FUNCTION
↓
CALLBACK FUNCTION
↓
DOM
↓
querySelector()
↓
DOM MANIPULATION
↓
EVENT
↓
INLINE EVENT HANDLER
↓
EVENT HANDLER PROPERTY
↓
addEventListener()
Jadi ini bukan materi yang berdiri sendiri.
addEventListener() adalah tempat banyak konsep sebelumnya mulai bertemu.
35. Cheat sheet yang wajib kamu ingat
Mengambil element
const button = document.querySelector(".my-button");
Menangani click
button.addEventListener("click", function() {
console.log("Clicked");
});
Menangani mouseover
button.addEventListener("mouseover", function() {
console.log("Mouse over");
});
Menangani mouseout
button.addEventListener("mouseout", function() {
console.log("Mouse out");
});
Menangani focus
input.addEventListener("focus", function() {
console.log("Focused");
});
Menangani input
input.addEventListener("input", function() {
console.log("User mengetik");
});
🎯 Kesimpulan paling penting
Kalau saya sederhanakan seluruh lecture ini menjadi satu kalimat:
addEventListener()digunakan untuk mengatakan kepada sebuah DOM element: “Dengarkan event ini, dan ketika event tersebut terjadi, jalankan function ini.”
Contoh:
button.addEventListener("click", function() {
alert("Hello");
});
Artinya:
“Button, dengarkan
click. Kalau user mengklikmu, jalankan function ini.”
Dan contoh lecture:
let header = document.querySelector("header");
header.addEventListener("mouseover", function() {
header.style.color = "black";
});
header.addEventListener("mouseout", function() {
header.style.color = "white";
});
Bacanya:
Ambil header
↓
Dengarkan mouseover
↓
Kalau mouse masuk → warna hitam
Dengarkan mouseout
↓
Kalau mouse keluar → warna putih
🧠 Tiga hal yang paling wajib diingat:
1. addEventListener() adalah METHOD
→ element.addEventListener(...)
2. Argument pertama adalah NAMA EVENT
→ "click"
→ "mouseover"
→ "mouseout"
3. Argument kedua adalah CALLBACK
→ function yang dijalankan ketika event terjadi
Dan satu aturan emas:
onclick/property → pakai "on"
addEventListener() → JANGAN pakai "on"
Jadi:
button.onclick = ...
vs.
button.addEventListener("click", ...)
Ini adalah perbedaan syntax yang sangat penting untuk kamu kuasai sebelum masuk ke lecture berikutnya.