Belajar Javascript: Memahami Event di Javascript
Apa itu Event?
Event secara bahasa artinya kejadian..
Pada Javascript:
Event adalah kejadian yang terjadi di halaman web.
Kejadian yang dimaksud di sini seperti aktivitas yang dikerjakan pada halaman web.
Misalnya seperti:
- User melakukan scroll;
- User melakukan klik pada elemen tertentu;
- Halaman web di-load;
- Form di-submit;
- dan sebagainya.
Kita bisa melakukan aksi tertentu untuk merespon event tersebut.
Misalnya:
Saat elemen <button> diklik, kita bisa jalankan fungsi untuk melakukan sesuatu.
Kasi contoh donk?
Oke, mari kita bahas!
Cara Handle Event di Javascript
Ada dua cara yang biasanya dilakukan untuk handle event di Javascript.
Cara Pertama: Menggunakan Atribut
HTML memiliki atribut event untuk menentukan fungsi yang akan dijalankan saat event terjadi.
onclick adalah atribut HTML untuk menentukan aksi saat event klik pada sebuah elemen. Atribut ini bisa diisi dengan nama fungsi atau ekspresi javascript.
Selain event onclick ada juga event lainnya seperti onchange, onmouseover, onkeyup, onload, dll.
Nama-nama atribut event ini tidak perlu kamu hapal, karena jumlahnya cukup banyak
Perhatikan, penulisan nama event ditulis tanpa menggunakan on. Jadi, misalnya kita ingin menghandle event klik, maka cukup tulis click saja.
// salah ❌
button.addEventListener('onclick', function(e) {
});
// benar ✅
button.addEventListener('click', function(e){
});Ouya, parameter e pada fungsi adalah parameter yang merupakan object event. Jadi kita bisa mengambil data dari object yang mengirim event dari parameter e. Pada contoh ini, object pengirimnya adalah button.
Parameter ini bersifat opsional, boleh kita berikan, boleh juga tidak.
Handle Event di Javascript
Kita akan coba beberapa event yang umum dipakai, seperti click, hover, keyup, keydown, change, dll.
Buatlah folder baru dengan nama latihan_event. Folder ini akan kita pakai untuk menyimpan file latihan.
1. Event Klik
Event klik termasuk dalam Mouse Event, karena pemicunya adalah aktivitas klik dari mouse atau tap (jika di HP).
Kita bisa memberikan aksi tertentu saat terjadi klik, misalnya menampilkan dialog alert().
Oh iya, jika kamu belum tahu tentang dialog di Javascript, silahkan baca:
2. Event Mouse
Selain diklik, berikut ini event yang bisa terjadi karena mouse:
mouseover(hover) saat pointer berada di atas element;mouseentersaat pointer mendekat pada elemen;mouseoutsaat pointer menjauh dari elemen;
Mari kita coba latihan!
Buatlah file baru dengan nama mouse-event.html, kemudian isi dengan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Event Mouse</title>
</head>
<body>
<button id="btn-enter">Mouse Enter</button>
<button id="btn-hover">Hover</button>
<button id="btn-out">Mouse Out</button>
<script>
const btnEnter = document.getElementById("btn-enter");
const btnHover = document.getElementById("btn-hover");
const btnOut = document.getElementById("btn-out");
btnEnter.addEventListener("mouseenter", function(event) {
event.target.innerText = "Mouse sudah masuk";
});
btnOut.addEventListener("mouseout", function(event) {
event.target.innerText = "Mouse sudah keluar";
});
btnHover.addEventListener("mouseover", function(event){
event.target.innerText = "Mouse sudah di atas elemen";
});
</script>
</body>
</html>
Komentar
Posting Komentar