JavaScript : Event JavaScript

Memahami event dan event handler

Event adalah sesuatu yang terjadi ketika pengguna berinteraksi dengan halaman web, seperti ketika dia mengklik tautan atau tombol, memasukkan teks ke dalam kotak input atau textarea, membuat pilihan dalam select box, menekan tombol pada keyboard, memindahkan pointer mouse, memasukkan formulir, dll. Dalam beberapa kasus, Browser itu sendiri dapat men-trigger event, seperti memuat halaman dan membongkar event.

Ketika suatu event terjadi, kalian dapat menggunakan JavaScript event handler (atau bahkan event listener) untuk mendeteksi event tersebut dan melakukan tugas atau serangkaian tugas tertentu. Secara universal, nama-nama untuk event handler selalu dimulai dengan kata “on“, jadi event handler untuk event klik disebut onclick, sama halnya event handler untuk event load disebut onload, event handler untuk event blur disebut onblur, dan seterusnya.

Ada beberapa cara untuk menetapkan event handler. Cara paling sederhana adalah menambahkannya langsung ke tag awal elemen HTML menggunakan atribut khusus event-handler. Misalnya, untuk menetapkan click handler untuk elemen tombol, kita dapat menggunakan atribut onclick, seperti ini:

<button type="button" onclick="alert('Hello World!')">Click Me</button>

Namun, agar JavaScript tetap terpisah dari HTML, kalian dapat mengatur event handler dalam file JavaScript eksternal atau di dalam tag <script> dan </script>, seperti ini:

<button type="button" id="myBtn">Click Me</button>
<script>
    function sayHello() {
        alert('Hello World!');
    }
    document.getElementById("myBtn").onclick = sayHello;
</script>

Secara umum, event dapat dikategorikan ke dalam empat kelompok utama yaitu  mouse eventskeyboard eventsform events dan document/window events.

Mouse Event

Mouse event bekerja ketika pengguna mengklik beberapa elemen, memindahkan pointer mouse ke atas elemen, dll. Berikut ini ada beberapa peristiwa mouse yang paling penting dan event handler mereka.

Click Event (Onclick)

Click Event terjadi ketika pengguna mengklik elemen di halaman web. Seringkali, ini adalah elemen form dan tautan. Kalian dapat menangani click event dengan onclick event handler.

Contoh berikut akan menampilkan pesan alert kepada kalian ketika kalian mengklik elemen tersebut.

<button type="button" onclick="alert('You have clicked a button!');">Click Me</button>
<a href="#" onclick="alert('You have clicked a link!');">Click Me</a>
Contextmenu Event (oncontextmenu)

Contextmenu event terjadi ketika pengguna mengklik tombol mouse kanan pada suatu elemen untuk membuka menu konteks. Kalian dapat menangani contextmenu event dengan oncontextmenu event handler.

Contoh berikut akan menampilkan pesan peringatan ketika kalian mengklik kanan pada elemen tersebut.

<button type="button" oncontextmenu="alert('You have right-clicked a button!');">Right Click on Me</button>
<a href="#" oncontextmenu="alert('You have right-clicked a link!');">Right Click on Me</a>
Event Mouseover (onmouseover)

Mouseover event terjadi ketika pengguna menggerakkan mouse pointer ke suatu elemen.

Kalian dapat menangani event mouseover dengan onmouseover event handler. Contoh berikut akan menampilkan pesan alert ketika kalian mengarahkan mouse ke suatu elemen.

<button type="button" onmouseover="alert('You have placed mouse pointer over a button!');">Place Mouse Over Me</button>
<a href="#" onmouseover="alert('You have placed mouse pointer over a link!');">Place Mouse Over Me</a>
Event Mouseout (onmouseout)

Event mouseout terjadi ketika pengguna memindahkan pointer mouse ke luar elemen.

Kalian dapat menangani event mouseout dengan onmouseout event handler. Contoh berikut akan menampilkan pesan alert ketika event mouseout terjadi.

<button type="button" onmouseout="alert('You have moved out of the button!');">Place Mouse Inside Me and Move Out</button>
<a href="#" onmouseout="alert('You have moved out of the link!');">Place Mouse Inside Me and Move Out</a>
Event Keyboard

Event keyboard akan bekerja ketika pengguna menekan atau melepaskan tombol pada keyboard. Berikut adalah beberapa event keyboard yang paling penting dan event handler mereka.

Event Keydown (onkeydown)

Event keydown terjadi ketika pengguna menekan tombol pada keyboard.

Kalian dapat menangani event keydown dengan onkeydown event handler. Contoh berikut akan menampilkan pesan alert ketika event keydown terjadi.

<input type="text" onkeydown="alert('You have pressed a key inside text input!')">
<textarea onkeydown="alert('You have pressed a key inside textarea!')"></textarea>
Event Keyup (onkeyup)

Event keyup terjadi ketika pengguna melepaskan tombol pada keyboard.

Kalian dapat menangani event keyup dengan onkeyup event handler. Contoh berikut akan menampilkan pesan alert ketika event keyup terjadi.

<input type="text" onkeyup="alert('You have released a key inside text input!')">
<textarea onkeyup="alert('You have released a key inside textarea!')"></textarea>
Event Keypress (onkeypress)

Event keypress terjadi ketika pengguna menekan tombol pada keyboard yang memiliki nilai karakter yang terkait dengannya. Misalnya, tombol seperti Ctrl, Shift, Alt, Esc, tombol panah, dll. Tidak akan menghasilkan event keypress, tetapi akan menghasilkan event keydown dan keyup.

Kalian dapat menangani event keypress dengan onkeypress event handler. Contoh berikut akan menampilkan pesan alert kepada kalian ketika event keypress terjadi.

<input type="text" onkeypress="alert('You have pressed a key inside text input!')">
<textarea onkeypress="alert('You have pressed a key inside textarea!')"></textarea>
Events Form

Event form terjadi ketika form kontrol menerima atau kehilangan fokus atau ketika pengguna mengubah nilai kontrol formulir seperti dengan mengetikkan teks pada input teks, pilih opsi apa pun pada select box dll. Berikut ini beberapa event form paling penting dan event handler mereka.

Event Focus (onfocus)

Event fokus terjadi ketika pengguna memberikan fokus ke suatu elemen di halaman web.

Kalian dapat menangani event focus dengan onfocus event handler. Contoh berikut akan membuat background input teks menjadi warna kuning ketika menerima fokus.

<script>
    function highlightInput(elm){
        elm.style.background = "yellow";
    }    
</script>
<input type="text" onfocus="highlightInput(this)">
<button type="button">Button</button>
Event Blur (onblur)

Peristiwa blur terjadi ketika pengguna mengambil fokus dari elemen form atau window.

Kalian dapat menangani event blur dengan onblur event handler. Contoh berikut akan menampilkan pesan alert ketika elemen input teks kehilangan fokus-nya.

<input type="text" onblur="alert('Text input loses focus!')">
<button type="button">Submit</button>

Untuk menghilangkan fokus dari elemen form, pertama click di dalamnya, lalu tekan tombol tab pada keyboard, fokuskan kepada sesuatu yang lain, atau klik di luarnya.

Event Change (onchange)

Event change terjadi ketika pengguna mengubah nilai elemen form.

Kalian dapat menangani event change dengan onchange event handler. Contoh berikut akan menampilkan pesan alert ketika kalian mengubah opsi di select box.

<select onchange="alert('You have changed the selection!');">
    <option>Select</option>
    <option>Male</option>
    <option>Female</option>
</select>
Event Submit (onsubmit)

Submit event hanya terjadi ketika pengguna mengirimkan formulir di halaman web.

Kalian dapat menangani submit event dengan onsubmit event handler. Contoh berikut akan menampilkan pesan alert kepada kalian saat submit form ke server.

<form action="action.php" method="post" onsubmit="alert('Form data will be submitted to the server!');">
    <label>First Name:</label>
    <input type="text" name="first-name" required>
    <input type="submit" value="Submit">
</form>