Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar JavaScript Bagian 6 : Jenis-jenis Operator JavaScript, selanjutnya kita akan belajar cara menangani event di JavaScript.
Memahami Event dan Event handler
Event adalah sesuatu yang terjadi ketika pengguna berinteraksi dengan halaman web, seperti ketika dia mengklik link atau tombol, memasukkan teks ke dalam kotak input atau textarea, melakukan pemilihan di kotak pilih, menekan tombol pada keyboard, menggerakkan penunjuk mouse , mengirimkan formulir, dll.
Dalam beberapa kasus, Browser itu sendiri dapat memicu event, seperti event load dan unload halaman.
Saat suatu event terjadi, Anda dapat menggunakan event handler JavaScript (atau event listener) untuk mendeteksinya dan melakukan tugas atau serangkaian tugas tertentu.
Menurut konvensi, nama untuk event handler selalu dimulai dengan kata “on”, jadi event handler untuk event click disebut onclick, begitu pula event handler untuk event load disebut onload, event handler untuk event blur disebut onblur , dan seterusnya.
Ada beberapa cara untuk menetapkan event handler. Cara termudah adalah dengan menambahkannya langsung ke tag awal elemen HTML menggunakan atribut event-handler khusus.
Misalnya, untuk menetapkan handler klik untuk elemen tombol, kita dapat menggunakan atribut onclick, seperti ini:
<button type="button" onclick="alert('Halo Dunia!')">Klik Saya</button>
Namun, untuk menjaga JavaScript tetap terpisah dari HTML, Anda dapat menyiapkan event handler di file JavaScript eksternal atau dalam tag <script> dan </script>, seperti ini:
<button type="button" id="myBtn">Klik Saya</button>
<script>
function sayHalo(){
alert('Halo Dunia!');
}
document.getElementById("myBtn").onclick = sayHalo;
</script>
Secara umum, event dapat dikategorikan ke dalam 4 grup utama – event mouse, event keyboard, event formulir, dan event dokumen / window event.
Masih banyak event lainnya, kita akan mempelajarinya di tutorial selanjutnya.
Bagian berikut akan memberi Anda gambaran singkat tentang event paling berguna satu per satu bersama dengan contoh praktiknya.
Event Mouse
Event mouse dipicu saat pengguna mengklik beberapa elemen, menggerakkan penunjuk mouse ke atas sebuah elemen, dll.
Berikut adalah beberapa event mouse yang paling penting dan event handlernya.
Event Klik (onclick)
Event klik terjadi saat pengguna mengklik elemen di halaman web.
Seringkali, ini adalah elemen bentuk dan tautan. Anda bisa menangani event klik dengan event handler onclick.
Contoh berikut akan menampilkan pesan peringatan saat Anda mengklik elemen.
<button type="button" onclick="alert('Anda telah mengklik tombol!');">Klik Saya</button>
<a href="#" onclick="alert('Anda telah mengklik tombol!');">Klik Saya</a>
Event Menu Konteks (oncontextmenu)
Event menu konteks terjadi ketika pengguna mengklik tombol kanan mouse pada elemen untuk membuka menu konteks.
Anda bisa menangani event menu konteks dengan event handler oncontextmenu.
Contoh berikut akan menampilkan pesan peringatan ketika Anda mengklik kanan pada elemen.
<button type="button" oncontextmenu="alert('Anada telah meng-klik kanan tombol!');">Klik Kanan Saya</button>
<a href="#" oncontextmenu="alert('Anda telah meng-klik kanan tombol!');">Klik Kanan Saya</a>
Event Mouse Over (onmouseover)
Event gerakan mouse terjadi saat pengguna menggerakkan penunjuk mouse ke atas sebuah elemen.
Anda dapat menangani event gerakan mouse dengan event handler onmouseover.
Contoh berikut akan menampilkan pesan peringatan saat Anda mengarahkan mouse ke elemen.
<button type="button" onmouseover="alert('Anda telah meletakkan pointer mouse di luar link!');">Geser Mouse di luar Saya</button>
<a href="#" onmouseover="alert(' Anda telah meletakkan pointer mouse di luar link!');"> Geser Mouse di luar Saya</a>
Event Mouseout (onmouseout)
Event mouseout terjadi saat pengguna menggerakkan penunjuk mouse ke luar elemen.
Anda bisa menangani event mouseout dengan event handler onmouseout.
Contoh berikut akan menampilkan pesan peringatan saat event mouseout terjadi.
<button type="button" onmouseout="alert('Anda telah keluar dari tombol!');">Tempatkan Mouse ke dalam Saya dan Keluar</button>
<a href="#" onmouseout="alert('Anda telah keluar dari link!');">Tempatkan Mouse ke dalam Saya dan Keluar </a>
Event Keyboard
Event keyboard diaktifkan saat pengguna menekan atau melepaskan tombol pada keyboard. Berikut adalah beberapa event keyboard paling penting dan event handler mereka.
Event Keydown (onkeydown)
Event keydown terjadi saat pengguna menekan tombol pada keyboard.
Anda dapat menangani event keydown dengan event handler onkeydown. Contoh berikut akan menampilkan pesan peringatan ketika event keydown terjadi.
<input type="text" onkeydown="alert('Anda telah menekan sebuah tombol di dalam input teks!')">
<hr>
<textarea cols="30" onkeydown="alert('Anda telah menekan tombol di dalam textarea!')"></textarea>
<p><strong>Catatan : </strong>Cobalah untuk memasukkan beberapa teks di dalam kotak input dan textarea.</p>
Event Keyup (onkeyup)
Event keyup terjadi saat pengguna melepaskan tombol pada keyboard.
Anda bisa menangani event keyup dengan event handler onkeyup.
Contoh berikut akan menunjukkan pesan peringatan ketika event keyup terjadi.
<input type="text" onkeyup="alert(' Anda telah menekan tombol di dalam input teks!')">
<hr>
<textarea cols="30" onkeyup="alert(' Anda telah menekan tombol di dalam input di teksarea!')"></textarea>
<p><strong>Catatan:</strong> Cobalah untuk memasukkan beberapa teks di dalam kotak input dan textarea.</p>
Event Keypress (onkeypress)
Event keypress terjadi saat 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.
Anda dapat menangani event keypress dengan event handler onkeypress.
Contoh berikut akan menampilkan pesan peringatan saat event keypress terjadi.
<input type="text" onkeypress="alert(' Anda telah menekan sebuah tombol di dalam input teks!')">
<hr>
<textarea cols="30" onkeypress="alert(' Anda telah menekan tombol di dalam textarea!')"></textarea>
<p><strong>Catatan:</strong>Cobalah untuk memasukkan beberapa teks di dalam kotak input dan textarea.</p>
Event Form
Event formulir dijalankan saat kontrol formulir menerima atau kehilangan fokus atau saat pengguna mengubah nilai kontrol formulir seperti dengan mengetik teks di input teks, memilih pilihan apa pun di kotak pilih, dll.
Berikut adalah beberapa event formulir yang paling penting dan penanganan eventnya.
Event Fokus (onfocus)
Event fokus terjadi saat pengguna memberikan fokus ke elemen di halaman web.
Anda bisa menangani event fokus dengan event handler onfocus.
Contoh berikut akan menyorot latar belakang input teks dengan warna kuning saat menerima fokus.
<script>
function highlightInput(elm){
elm.style.background = "yellow";
}
</script>
<input type="text" onfocus="highlightInput(this)">
<button type="button">Tombol</button>
Event Blur (onblur)
Event blur terjadi saat pengguna mengalihkan fokus dari elemen formulir atau jendela.
Anda dapat menangani event blur dengan pengendali event onblur.
Contoh berikut akan menampilkan pesan peringatan ketika elemen input teks kehilangan fokus.
<input type="text" onblur="alert('Input teks kehilangan fokus!')">
<button type="button">Kirimkan</button>
<p><strong>Catatan:</strong>Pertama klik di dalam kotak input teks lalu klik di luar untuk melihat cara kerjanya.</p>
Untuk mengalihkan fokus dari elemen formulir, klik pertama di dalamnya lalu tekan tombol tab pada keyboard, berikan fokus pada hal lain, atau klik di luarnya.
Event Change (onchange)
Event perubahan terjadi saat pengguna mengubah nilai elemen formulir.
Anda dapat menangani event perubahan dengan pengendali event onchange.
Contoh berikut akan memperlihatkan pesan peringatan saat Anda mengubah opsi di kotak pilih.
<select onchange="alert('Anda telah mengubah pilihan!');">
<option>Pilih</option>
<option>Pria</option>
<option>Wanita</option>
</select>
<p><strong>Catatan:</strong>Pilih opsi apa pun di kotak pilih untuk melihat cara kerjanya.</p>
Event Submit (onsubmit)
Event pengiriman hanya terjadi ketika pengguna mengirimkan formulir di halaman web.
Anda dapat menangani event submit dengan event handler onsubmit.
Contoh berikut akan menampilkan pesan peringatan saat mengirimkan formulir ke server.
<form action="/contoh/html/action.php" method="post" onsubmit="alert(' Data formulir akan diserahkan ke server!');">
<label>Nama Depan:</label>
<input type="text" name="nama-depan" required>
<input type="submit" value="Kirimkan">
</form>
Event Dokumen/Window
Event inin dipicu dalam situasi ketika halaman telah dimuat atau ketika pengguna mengubah ukuran jendela browser, dll.
Berikut adalah beberapa event dokumen/window yang paling penting dan penangan event mereka.
Event Load (onload)
Event load terjadi ketika halaman web telah selesai memuat di browser web.
Anda dapat menangani event pemuatan dengan penangan event onload.
Contoh berikut akan menampilkan pesan peringatan segera setelah halaman selesai dimuat.
<body onload="window.alert('Halaman berhasil dimuat!');">
<h1>Ini adalah heading</h1>
<p>Ini adalah paragraph teks.</p>
</body>
Event Unload (onunload)
Event unload terjadi ketika pengguna meninggalkan halaman web saat ini.
Anda dapat menangani event unload dengan event handler onunload.
Contoh berikut akan menampilkan pesan peringatan saat Anda mencoba meninggalkan halaman.
<body onunload="alert(' Anda yakin ingin meninggalkan halaman ini?');">
<h1>Ini adalah heading</h1>
<p>Ini adalah paragraph teks.</p>
<p><strong>Catatan:</strong> Contoh ini mungkin tidak berhasil. Event unload tidak didukung dengan baik di sebagian besar browser.</p>
Event Resize (onresize)
Event resize terjadi saat pengguna mengubah ukuran jendela browser.
Event resize juga terjadi dalam situasi ketika jendela browser diminimalkan atau dimaksimalkan.
Anda bisa menangani event resize dengan event handler onresize.
Contoh berikut akan menampilkan pesan peringatan saat Anda mengubah ukuran jendela browser ke lebar dan tinggi baru.
<p id="hasil"></p>
<script>
function displayWindowSize(){
var w = window.outerWidth;
var h = window.outerHeight;
var txt = "Window size: width=" + w + ", height=" + h;
document.getElementById("hasil").innerHTML = txt;
}
window.onresize = displayWindowSize;
</script>
<p><strong>Catatan:</strong> Ubah ukuran jendela browser untuk melihat cara kerja acara pengubahan ukuran.</p>
Semoga tutorial ini bisa membantu Anda untuk belajar cara menangani event di JavaScript.
