Masukkan Password
41 Event Handler Property
Lecture ini membahas event handler property, yaitu cara kedua menangani event di JavaScript setelah sebelumnya kita belajar inline event handler.
Kalau lecture sebelumnya fokus pada:
“Event ditulis langsung di HTML.”
Lecture kali ini fokus pada:
“Element dicari dari JavaScript, lalu event handler dipasang dari JavaScript.”
1. Gambaran besar lecture ini
Sebelum masuk kode, pahami dulu konsep utamanya:
User melakukan sesuatu
↓
EVENT
↓
Event listener mendeteksi event
↓
EVENT HANDLER dijalankan
↓
JavaScript melakukan sesuatu
Contoh:
User klik "Apply Now"
↓
click event
↓
onclick property
↓
function dijalankan
↓
alert("Thank you for applying")
Jadi ada 3 istilah penting:
| Istilah | Arti sederhana |
|---|---|
| Event | Sesuatu yang terjadi |
| Event listener | Yang “mendengarkan” event |
| Event handler | Kode/function yang dijalankan sebagai respons |
2. Apa itu Event?
Event adalah sesuatu yang terjadi pada halaman atau elemen.
Contohnya:
Klik tombol → click
Mouse masuk → mouseover
Mouse keluar → mouseout
Input difokuskan → focus
Keyboard ditekan → keydown
Misalnya ada:
<button>Apply Now</button>
Ketika user klik tombol:
<button>
↓
user klik
↓
click event terjadi
JavaScript kemudian bisa merespons event tersebut.
Misalnya:
alert("Thank you for applying");
3. Ada beberapa cara menangani event
Dalam lecture sebelumnya kita sudah belajar inline event handler.
Sekarang kita belajar event handler property.
Nanti ada metode ketiga:
1. Inline event handler
2. Event handler property ← lecture sekarang
3. addEventListener() ← nanti
4. Cara pertama: Inline Event Handler
Contoh dari lecture sebelumnya:
<div onclick="renderSelectedSection('homepage')">
Home
</div>
Perhatikan:
onclick="..."
onclick ditulis langsung sebagai attribute HTML.
Artinya:
“Kalau element ini diklik, jalankan JavaScript ini.”
Contoh sederhana:
<button onclick="alert('Hello')">
Click Me
</button>
JavaScript ditulis langsung di HTML.
5. Sekarang: Event Handler Property
Pada lecture ini kita ingin menghindari cara seperti:
<button onclick="...">
Kita ingin menangani event dari JavaScript.
Misalnya HTML kita:
<button class="apply-now-button">
Apply Now
</button>
Pertama kita ambil tombol tersebut dari DOM.
let applyButton = document.querySelector(".apply-now-button");
Ingat lecture sebelumnya:
document.querySelector()
digunakan untuk mencari element berdasarkan CSS selector.
Karena kita mencari class:
".apply-now-button"
Ada titik . di depan.
6. Apa isi applyButton?
Setelah:
let applyButton = document.querySelector(".apply-now-button");
variabel:
applyButton
menyimpan object DOM yang merepresentasikan tombol tersebut.
Gambaran sederhananya:
HTML
↓
<button class="apply-now-button">
↓
Browser membuat DOM object
↓
applyButton
Jadi kita sekarang bisa melakukan sesuatu terhadap tombol melalui:
applyButton
7. Memasang onclick
Sekarang kita bisa mengakses property:
applyButton.onclick
Kemudian kita isi dengan sebuah function:
applyButton.onclick = function() {
alert("Thank you for applying");
};
Perhatikan struktur ini:
applyButton.onclick = function() {
alert("Thank you for applying");
};
Mari kita pecah.
Bagian 1
applyButton
Artinya:
Tombol yang tadi kita ambil dari DOM.
Bagian 2
.onclick
Artinya:
Property untuk menangani click event.
Bagian 3
=
Artinya:
Kita memasukkan sesuatu ke property tersebut.
Bagian 4
function() {
alert("Thank you for applying");
}
Ini adalah function yang akan dijalankan ketika tombol diklik.
8. Kenapa menggunakan anonymous function?
Kita menulis:
function() {
alert("Thank you for applying");
}
Function tersebut tidak memiliki nama.
Ini disebut:
anonymous function.
Kita menggunakan anonymous function karena function tersebut hanya diperlukan sebagai handler untuk tombol itu.
Misalnya:
applyButton.onclick = function() {
alert("Thank you for applying");
};
Kita tidak membutuhkan:
function showThankYouMessage() {
alert("Thank you for applying");
}
kalau function tersebut memang tidak akan digunakan di tempat lain.
9. Jangan tertukar dengan ()
Ini sangat penting.
Misalnya kita punya:
function sayHello() {
console.log("Hello");
}
Kalau kita menulis:
applyButton.onclick = sayHello;
kita memberikan function-nya kepada onclick.
Tetapi:
applyButton.onclick = sayHello();
berarti kita langsung menjalankan function tersebut sekarang.
Jadi:
sayHello
↓
function-nya
sayHello()
↓
jalankan function sekarang
Dalam event handler kita biasanya memberikan function:
applyButton.onclick = sayHello;
atau:
applyButton.onclick = function() {
...
};
10. Apa yang terjadi ketika tombol diklik?
Kode:
applyButton.onclick = function() {
alert("Thank you for applying");
};
jangan dibaca sebagai:
“Jalankan function sekarang.”
Tetapi:
“Kalau nanti tombol ini diklik, jalankan function ini.”
Urutannya:
JavaScript membaca:
applyButton.onclick = function() {...}
↓
Function disimpan sebagai handler
↓
User klik Apply Now
↓
click event terjadi
↓
onclick dijalankan
↓
function dijalankan
↓
alert muncul
11. Inilah yang dimaksud Event Handler Property
Pada HTML, kita punya:
onclick
sebagai attribute.
Di DOM object, kita bisa menggunakan:
onclick
sebagai property.
Perbedaannya:
Inline
<button onclick="alert('Hello')">
onclick berada di HTML.
Event handler property
applyButton.onclick = function() {
alert("Hello");
};
onclick diakses dari JavaScript sebagai property DOM object.
12. Kita bisa menangani event lain
Lecture kemudian memberikan contoh lain.
Bukan cuma:
onclick
Kita juga bisa menggunakan:
onmouseover
dan:
onmouseout
Contohnya:
applyButton.onmouseover = function() {
// lakukan sesuatu
};
Artinya:
Ketika mouse berada/masuk ke tombol, jalankan function.
Sedangkan:
applyButton.onmouseout = function() {
// lakukan sesuatu
};
Artinya:
Ketika mouse keluar dari tombol, jalankan function.
13. Contoh mengubah style saat mouse masuk
Lecture ingin ketika mouse berada di atas tombol:
- background menjadi transparent
- border muncul
Kita bisa menulis:
applyButton.onmouseover = function() {
applyButton.style.backgroundColor = "transparent";
applyButton.style.border = "2px solid #28282B";
};
Perhatikan kita menggunakan konsep dari lecture sebelumnya:
element.style.property
Misalnya:
applyButton.style.backgroundColor
untuk mengubah:
background-color
14. Kenapa background-color menjadi backgroundColor?
Ini sangat penting.
Di CSS:
background-color: orange;
Ada tanda:
-
Tetapi ketika ditulis di JavaScript:
applyButton.style.backgroundColor = "orange";
menjadi camelCase.
Aturannya:
CSS JavaScript
background-color → backgroundColor
font-size → fontSize
margin-top → marginTop
border-radius → borderRadius
text-align → textAlign
Jadi:
Kalau nama CSS terdiri dari beberapa kata, JavaScript biasanya menggunakan camelCase.
15. Contoh lengkap mouseover
Misalnya:
applyButton.onmouseover = function() {
applyButton.style.backgroundColor = "transparent";
applyButton.style.border = "2px solid #28282B";
};
Ketika mouse masuk:
Mouse masuk
↓
mouseover event
↓
onmouseover
↓
function
↓
background → transparent
border → muncul
16. Lalu bagaimana mengembalikan style?
Nah, lecture menemukan masalah.
Ketika mouse keluar:
Mouse masuk
↓
background berubah
↓
mouse keluar
↓
background tetap berubah
Kenapa?
Karena kita baru menangani:
onmouseover
Kita belum menangani:
onmouseout
Maka kita tambahkan:
applyButton.onmouseout = function() {
applyButton.style.backgroundColor = "orange";
applyButton.style.border = "none";
};
Sekarang:
Mouse masuk
↓
mouseover
↓
ubah style
Mouse keluar
↓
mouseout
↓
kembalikan style
17. Sekarang satu element menangani 3 event
Tombol kita sekarang memiliki:
applyButton.onclick = function() {
alert("Thank you for applying");
};
applyButton.onmouseover = function() {
applyButton.style.backgroundColor = "transparent";
applyButton.style.border = "2px solid #28282B";
};
applyButton.onmouseout = function() {
applyButton.style.backgroundColor = "orange";
applyButton.style.border = "none";
};
Satu element bisa menangani banyak event.
applyButton
│
┌──────────┼──────────┐
↓ ↓ ↓
onclick onmouseover onmouseout
↓ ↓ ↓
alert ubah style kembalikan style
18. Bedakan nama event dan nama property
Ini juga sering membingungkan pemula.
Nama event:
click
mouseover
mouseout
focus
Nama event handler property:
onclick
onmouseover
onmouseout
onfocus
Pola sederhananya:
event
↓
tambahkan "on" di depan
↓
event handler property
Contoh:
| Event | Property |
|---|---|
click | onclick |
mouseover | onmouseover |
mouseout | onmouseout |
focus | onfocus |
change | onchange |
submit | onsubmit |
19. Event vs Event Listener vs Event Handler
Ini bagian yang sangat penting dari lecture.
Misalnya:
applyButton.onclick = function() {
alert("Thank you");
};
Kita bisa membayangkan:
1. Event
click
Sesuatu terjadi:
User mengklik tombol.
2. Event listener
onclick
Secara konsep:
“Saya menunggu click event pada tombol ini.”
3. Event handler
function() {
alert("Thank you");
}
Ini adalah:
“Apa yang harus dilakukan ketika click terjadi?”
Jadi:
CLICK
↓
event
↓
onclick
↓
listener
↓
function()
↓
handler
↓
alert()
20. Analogi paling gampang
Bayangkan kamu punya satpam.
Ada seseorang masuk ke gedung.
Event
Seseorang masuk.
"Orang masuk!"
Itu adalah event.
Event listener
Satpam memperhatikan pintu.
"Kalau ada orang masuk, saya akan tahu."
Itu adalah listener.
Event handler
Satpam melakukan sesuatu:
"Kalau ada orang masuk, saya cek kartu identitasnya."
Itu adalah handler.
Dalam JavaScript:
Event
↓
click
Listener
↓
onclick
Handler
↓
function() {
alert("Thank you");
}
21. Hubungan dengan DOM yang kita pelajari sebelumnya
Ini sebenarnya merupakan kelanjutan langsung dari lecture sebelumnya.
Sebelumnya kita belajar:
let button = document.querySelector(".apply-now-button");
Artinya:
Cari element tombol dari DOM.
Lalu kita belajar:
button.style.backgroundColor = "red";
Artinya:
Ubah style element tersebut.
Sekarang kita gabungkan keduanya dengan event:
let button = document.querySelector(".apply-now-button");
button.onclick = function() {
button.style.backgroundColor = "red";
};
Artinya:
1. Cari tombol
↓
2. Tunggu tombol diklik
↓
3. Ketika diklik
↓
4. Ubah background menjadi merah
Ini mulai menunjukkan kekuatan JavaScript untuk membuat halaman interaktif.
22. Contoh sederhana dari nol
Misalnya HTML:
<button class="my-button">
Click Me
</button>
JavaScript:
let button = document.querySelector(".my-button");
button.onclick = function() {
alert("Button clicked!");
};
Hasilnya:
Sebelum klik:
┌─────────────┐
│ Click Me │
└─────────────┘
↓ user klik
┌──────────────────────┐
│ Button clicked! │
└──────────────────────┘
23. Contoh interaksi hover
HTML:
<button class="my-button">
Hover Me
</button>
JavaScript:
let button = document.querySelector(".my-button");
button.onmouseover = function() {
button.style.backgroundColor = "red";
};
button.onmouseout = function() {
button.style.backgroundColor = "white";
};
Alurnya:
Mouse masuk
↓
onmouseover
↓
background merah
Mouse keluar
↓
onmouseout
↓
background putih
24. Perbedaan lecture sebelumnya dan lecture sekarang
Ini kemungkinan bagian yang paling penting untuk diingat.
Inline Event Handler
<button onclick="alert('Hello')">
Event handling dilakukan di HTML.
Event Handler Property
let button = document.querySelector("button");
button.onclick = function() {
alert("Hello");
};
Event handling dilakukan di JavaScript.
Nanti: addEventListener
Kita akan belajar:
button.addEventListener("click", function() {
alert("Hello");
});
Ini adalah cara yang lebih fleksibel dan sangat umum digunakan dalam JavaScript modern.
Jadi untuk sementara ingat:
Inline
↓
HTML mengatur event
Event Handler Property
↓
JavaScript mengatur event
addEventListener
↓
JavaScript mengatur event dengan cara yang lebih fleksibel
25. Satu hal penting tentang Event Handler Property
Ada satu karakteristik penting dari property seperti:
button.onclick
Jika kita memberikan function kedua kali:
button.onclick = function() {
console.log("A");
};
button.onclick = function() {
console.log("B");
};
Yang dijalankan ketika diklik adalah function kedua:
B
Function pertama digantikan.
Ini berbeda dengan addEventListener(), yang nanti memungkinkan kita memasang beberapa listener untuk event yang sama.
Untuk level lecture ini, cukup ingat:
onclickadalah satu property yang bisa diisi dengan event handler.
26. Kenapa tidak langsung pakai HTML saja?
Pertanyaan yang mungkin muncul:
“Kalau bisa pakai
onclickdi HTML, kenapa repot-repot pakai JavaScript?”
Contoh inline:
<button onclick="alert('Hello')">
Untuk aplikasi kecil memang bisa.
Tapi semakin besar aplikasi, mencampur HTML dan JavaScript bisa membuat kode sulit dirawat.
Misalnya:
<button onclick="doSomething(); doSomethingElse(); updateUI(); ...">
HTML jadi penuh dengan JavaScript.
Dengan JavaScript:
let button = document.querySelector(".my-button");
button.onclick = function() {
// semua logic di sini
};
HTML lebih fokus pada struktur, sedangkan JavaScript menangani perilaku.
27. Connection dengan Dynamic Content dari lecture sebelumnya
Ini juga menarik karena lecture sebelumnya kita sudah membuat:
renderSelectedSection()
dan kemudian menggunakan click event untuk mengganti:
Home
Calculator
Apply for Loan
Sekarang kita belajar teknik event handling yang berbeda.
Misalnya:
homeTab.onclick = function() {
renderSelectedSection("homepage");
};
Artinya:
User klik Home
↓
click event
↓
onclick
↓
function
↓
renderSelectedSection("homepage")
↓
Homepage ditampilkan
Jadi event handling adalah salah satu hal yang membuat halaman web menjadi interaktif.
28. Cara membaca kode event handler
Kalau kamu melihat:
element.onclick = function() {
...
};
baca dengan bahasa manusia:
“Kalau element ini diklik, lakukan kode di dalam function.”
Kalau:
element.onmouseover = function() {
...
};
baca:
“Kalau mouse berada di atas element ini, lakukan kode di dalam function.”
Kalau:
element.onmouseout = function() {
...
};
baca:
“Kalau mouse keluar dari element ini, lakukan kode di dalam function.”
29. Cheat sheet lecture
Mengambil element
let button = document.querySelector(".my-button");
Click
button.onclick = function() {
console.log("Clicked");
};
Mouse masuk
button.onmouseover = function() {
console.log("Mouse over");
};
Mouse keluar
button.onmouseout = function() {
console.log("Mouse out");
};
Focus
input.onfocus = function() {
console.log("Input focused");
};
30. Kesimpulan besar
Ada beberapa poin yang sebaiknya benar-benar kamu kuasai dari lecture ini.
1. Event
Event adalah sesuatu yang terjadi.
click
mouseover
mouseout
focus
2. Event handler
Kode/function yang dijalankan sebagai respons terhadap event.
function() {
alert("Hello");
}
3. Event handler property
Property pada DOM object yang digunakan untuk menangani event.
button.onclick = function() {
...
};
4. Event bisa ditangani dari JavaScript
Kita ambil element:
let button = document.querySelector(".my-button");
kemudian pasang handler:
button.onclick = function() {
...
};
5. Satu element bisa menangani beberapa event
button.onclick = ...
button.onmouseover = ...
button.onmouseout = ...
6. CSS property berubah menjadi camelCase
background-color
menjadi:
backgroundColor
dan:
border-radius
menjadi:
borderRadius
🧠 Peta konsep paling penting
Kalau kamu hanya ingin mengingat satu diagram dari lecture ini, ingat yang ini:
HTML
↓
Browser membuat DOM
↓
document.querySelector()
↓
DOM object
↓
┌──────────┴──────────┐
↓ ↓
property style
↓ ↓
onclick backgroundColor
onmouseover border
onmouseout color
↓
EVENT
↓
FUNCTION
↓
JavaScript bekerja
Dan bedakan:
INLINE EVENT HANDLER
HTML
<button onclick="...">
EVENT HANDLER PROPERTY
JavaScript
button.onclick = function() {
...
};
NEXT
addEventListener()
Inti lecture ini sebenarnya sederhana: kita sudah belajar mengambil element dari DOM. Sekarang kita memberi tahu element tersebut, “kalau sesuatu terjadi padamu, jalankan function ini.” Itulah dasar interaksi pada website—klik tombol, hover, fokus input, submit form, dan sebagainya.