Pemula Wajib Tahu! Penggunaan Event Handler dalam Pembuatan Website

Penggunaan Event Handler || Photo by Growtika on Unsplash

Apa itu Event?

Sebelum kita pembahas terkait event handler, ada baiknya kita memahami penggunaan Event pada DOM (Document Object Model).

Event merupakan peristiwa yang terjadi di halaman website yang dipicu oleh kegiatan atau interaksi pengguna. Interaksi tersebut seperti klik (`click`), memuat halaman (`load`), menekan tombol (`keypress`) dan `scroll`.

Event ini berfungsi sebagai sinyal atau notifikasi jika ada suatu kejadian yang telah terjadi di halaman website. Namun, event itu sendiri tidak membalas aksi tersebut secara langsung. Melainkan event ini memicu metode atau fungsi tertentu yang memberitahu JavaScript bahwa ada suatu interaksi atau kejadian yang perlu ditangani.

Metode Event untuk Menangani Interaksi Pengguna

Terdapat 7 metode dalam JavaScript yang digunakan untuk menangani event, antara lain:

1. Event Listener
2. Event Bubbling dan Event Capturing
3. Event Delegation
4. `removeEventListener`
5. `preventDefault`
6. `dispatchEvent`
7. Event Handler

Namun, kali ini kita akan berfokus pada pembahasan metode Event Handler saja.

Apa Itu Event Handler?

Event Handler merupakan sebuah metode yang digunakan untuk menentukan respon JavaScript terhadap suatu event ketika event tersebut terjadi. Event Handler lah yang menentukan langkah atau aksi apa yang harus dilakukan oleh JavaScript ketika event dipicu.

Bagaimana Cara Kerja Event Handler?

Ketika sebuah Event Listener mendeteksi adanya interaksi yang dilakukan pengguna, event listener akan memanggil event handler terkait dan akan langsung mengeksekusi serta menjalankan kode yang ditulis.

Misalkan kita ingin memanggil event listener `click` pada sebuah tombol, kita akan menulis:

document.getElementById("Button".addEventListener("click", function(){
 //kita akan mengisi event Handler disini
});

Dalam contoh tersebut, kita ingin agar ketika pengguna menekan tombol, ada aksi yang terjadi. Jadi, kita bisa segera memasukkan event handler untuk menjalankan kode tersebut, seperti berikut:

document.getElementById("Button".addEventListener("click", function(){
 document.getElementById("message").textContent = "Button was clicked!";
});

Perlu diperhatikan, kita memasukkan kode event handler berikut, document.getElementById(“message”).textContent = “Button was clicked!”; untuk mengontrol apa yang terjadi saat event berjalan.

Dengan kata lain, event adalah “pemicu”, sementara event handler adalah “aksi” yang diambil sebagai respons terhadap pemicu tersebut.

Bagaimana? Mudah bukan?

Kamu bisa mempelajari metode-metode event dalam DOM lainnya melalui modul pembelajaran di Sekolah Koding.

Belajar Javascript untuk website

Ayo belajar ngoding di Sekolah Koding!