Pada chapter-chapter terdahulu dalam seri belajar bahasa pemrograman berbasis web sebelumnya kita telah mempelajari tentang Javascript dan jQuery. Kita juga sedikit-sedikit belajar tentang penggunaannya di dalam file HTML untuk membuat halaman web dinamis.
Secara umum penggunaan Javascript bergantung kepada situasi kapan harus digunakan. Kita memprediksi dan memanipulasi pola pengguna, kapan dan bagaimana dia mengarahkan mouse, dan sebagainya. Untuk itu dibutuhkan sebuah fitur penanganan Event agar informasi dari dokumen bisa diolah menjadi sesuatu yang lain.
Table of Contents
Berkenalan dengan Event – Jquery Event
Seluruh aktivitas di dunia menghasilkan kejadian atau peristiwa, dan dunia ini dipenuhi oleh acara. Misalnya acara ulang tahun, acara pernikahan, acara wisuda,dan sebagainya. Dari sekian banyak acara yang memenuhi jadwal dan waktu kita pasti akan memilah mana acara yang bisa saya ikuti, mana acara yang boleh saya ikuti , mana acara yang tidak ingin saya ikuti.
Demikian pula halnya dengan aplikasi komputer yang tujuannya adalah mensimulasikan aktivitas manusia ke dalam bentuk aktivitas terkomputerisasi termasuk dengan aplikasi bahasa pemrograman berbasis web. Ada banyak event yang muncul pada saat terjadi interaksi antara pengguna aplikasi dengan aplikasi, dalam kasus aplikasi web interaksi terjadi antara pengunjung dengan halaman web.
Ketika pengunjung menggerakkan mouse, mengklik mouse, mengetik untuk mengisi formulir halaman web itu adalah acara. Kunci untuk aplikasi web dinamis yang sukses adalah mendeteksi event yang anda butuhkan dan mengabaikan yang tidak anda butuhkan.
Pada chapter-chapter sebelumnya, kita membuat beberapa program contoh yang sifatnya prosedural atau biasa disebut Pemrograman Prosedural. Pada pemrograman prosedural dalam bahasa pemrograman berbasis web, proses eksekusi kode dijalankan secara berurutan baris-per-baris.
Ketika menangani Event, pemrograman yang digunakan adalah Pemrograman berbasis Event. Dengan pemrograman jenis ini, aktivitas eksekusi kode dijalankan menurut kejadian. Kita mendefinisikan event-event mendatang, kemudian ketika kejadian tersebut terjadi, browser akan mengeksekusi kode perintah yang telah dibuat. Itulah kelebihan dari bahasa pemrograman web berbasis client side.
Penanganan aktivitas mouse
Sebagian besar aktivitas manusia menggunakan komputer, termasuk salah satunya browser menggunakan antar-muka I/O (Input/Output) bernama Mouse.
JQuery event memiliki beberapa event-event yang khusus untuk menangani aktivitas mouse.
| Event | Deskripsi |
|---|---|
| onclick | Tombol utama mouse diklik / klik kiri |
| oncontextmenu | Tombol sekunder mouse / klik kanan |
| ondblclick | Tombol utama mouse diklik dobel / double click kiri |
| onmousedown | Tombol mouse diklik-tahan |
| onmouseenter | Pointer mouse masuk area tertentu pada jendela |
| onmouseleave | Pointer mouse meniggalkan area tertentu di jendela |
| onmousemove | Pointer mouse bergerak |
| onmouseover | Pointer mouse melewati sebuah objek |
| onmouseout | Pointer mouse keluar dari area tertentu di jendela |
| onmouseup | Tombol utama mouse dilepas |
Penanganan tombol keyboard – bahasa pemrograman berbasis web
Seperti halnya mouse, keyboard juga memiliki event.
| Event | Deskripsi |
|---|---|
| onkeydown | Salah satu tombol keybard ditekan |
| onkeypress | Salah satu tombol keyboard diketuk atau ditekan lalu dilepas |
| onkeyup | Tombol keyboard dilepas |
Perhatikan perbedaan halus di antara ketiga event dalam tabel di atas. Event onkeydown hanya memicu saat pengguna aplikasi menekan tombol. Sedangkan onkeypress dan onkeyup memicu ketika pengguna melepaskan tombol. Memang, untuk sebagian besar situasi pengetikan, perbedaannya sangat kecil, tetapi untuk beberapa aplikasi (misalnya, game), dapat berguna untuk mengetahui berapa lama tombol ditekan, yang hanya bisa kita dapatkan dari event onkeydown.
Istilah penekanan tombol mungkin sedikit membingungkan. Ada beberapa tombol pada keyboard standar yang tidak menghasilkan penekanan tombol itu sendiri, seperti tombol Shift, Alt, dan Ctrl pada keyboard Windows. Tombol ini adalah pengubah untuk tombol lain yang menghasilkan penekanan tombol.
Penanganan event pada halaman – Bahasa pemrograman web berbasis client side
Bahkan halaman web itu sendiri memiliki event yang dapat ditangkap oleh program JavaScript dan jQuery Anda. Sebelum HTML5, hanya ada beberapa kejadian halaman yang dapat kita manfaatkan. Standar HTML5 yang lebih baru telah mendefinisikan lebih banyak event pada halaman untuk dikerjakan.
| Event halaman | Deskripsi |
|---|---|
| onafterprint | Memicu event setelah pengunjung mencetak halaman web |
| onbeforeprint | Memicu event sebelum pengunjung mencetak halaman web |
| onbeforeunload | Memicu event sebelum halaman web ditutup pada jendela browser |
| onerror | Memicu ketika ada kesalahan dalam memuat file yang diperlukan untuk halaman web |
| onhaschange | Pemicu ketika alamat server URL telah berubah |
| onload | Pemicu ketika isi halaman web dimuat |
| onmessage | Pemicu saat pesan dikirim ke jendela browser |
| onoffline | Memicu ketika pengunjung situs mengatur browser untuk melihat halaman web secara offline |
| ononline | Pemicu ketika pengunjung situs mengatur browser untuk melihat halaman web secara online |
| onpagehide | Pemicu ketika pengunjung situs menavigasi jauh dari halaman web |
| onpageshow | Pemicu saat halaman web muncul di jendela browser |
| onpopstate | Pemicu saat riwayat browser berubah |
| onresize | Pemicu ketika pengunjung situs Anda mengubah ukuran jendela browser |
| onstorage | Pemicu saat area penyimpanan web diperbarui |
| onscroll | Pemicu saat pengguna menggerakkan scrollbar jendela browser |
| onunload | Pemicu ketika halaman web dihapus dari jendela browser |
Event halaman web memungkinkan kita untuk melacak kapan halaman web pertama kali muncul di browser pengguna dan ketika ia meninggalkan browser (dan bahkan tepat sebelum ia meninggalkannya). Ini memberi pada kita kesempatan untuk memuat hal-hal tepat di depan ketika halaman muncul, atau melakukan beberapa operasi saat halaman akan menghilang dari jendela browser.
Penanganan Event oleh Javascript
Kombinasi antara JavaScript dan HTML menyediakan cara untuk menangkap event dan melakukan beberapa jenis tindakan ketika terjadi. Kode elemen HTML mendaftarkan fungsi JavaScript untuk dijalankan browser ketika peristiwa pada elemen tertentu terjadi.
Elemen HTML yang berbeda menghasilkan peristiwa yang berbeda berdasarkan bagaimana mereka berinteraksi dengan pengunjung situs di halaman web.
Contoh program event onload
Buat sebuah file, beri nama bebas misalnya javascriptLoad.html. Masukkan kode seperti berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Latihan Event Halaman</title>
<script>
function welcome() {
alert("Selamat datang di website saya!");
}
</script>
</head>
<body onload="welcome()">
<h1>Ini Judul halaman</h1>
<p>Ini paragraf halaman website</p>
</body>
</html>Menangani Event Mouse
Untuk memicu fungsi JavaScript untuk event mouse, kita perlu menentukan event sebagai atribut dalam elemen HTML.
Klik Mouse
Ketika pengguna mengklik (tombol kiri) mouse di mana saja pada halaman web, itu memicu event mouse.
<button onclick="fungsiKlik()">Untuk lebih jelasnya kita buat sebuah file program contoh bernama klikMouse.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan Event Klik Mouse</title>
<script>
function klik(pilihan) {
if (pilihan == "makan") {
alert("Anda ingin makan?");
} else if (pilihan == "minum") {
alert("Anda ingin minum?");
} else if (pilihan == "tidur") {
alert("Anda ingin tidur");
}
}
</script>
</head>
<body>
<h1>Pilihan aktivitas</h1>
<p>Pilih salah satu aktivitas di bawah ini:</p>
<button onclick="klik('tidur')">Tidur</button>
<button onclick="klik('minum')">Minum</button>
<button onclick="klik('makan')">Makan</button>
</body>
</html>Melewatkan Pointer Mouse
Aktivitas event ini menggunakan onmouseover dan onmouseout
Buat sebuah file bernama hoverMouse.html
<!DOCTYPE html>
<html>
<head>
<title>Event Mouse</title>
<style>
#test {
background-color: blue;
width:400px;
height: 300px;
}
</style>
<script>
function gantiwarna(state) {
if (state == "in") {
document.getElementById("test").style.backgroundColor="red";
} else if (state == "out") {
document.getElementById("test").style.backgroundColor="yellow";
}
}
</script>
</head>
<body>
<h1>Latihan menangani event mouse</h1>
<p id="test" onmouseover="gantiwarna('in')" onmouseout="gantiwarna('out')">
Warna latar belakang akan berganti ketika mouse masuk dan keluar area!
</p>
</body>
</html>Membaca ketukan keyboard
Elemen yang menerima entri data, seperti kotak teks dan area teks, dapat memicu peristiwa penekanan tombol saat pengunjung situs mengetik. Ini memungkinkan Anda untuk memantau data apa yang masuk pengunjung situs anda ke bidang formulir saat mereka mengetik.
Anda akan sering menemukan diri Anda dalam situasi di mana Anda perlu menghitung karakter yang dimasukkan ke dalam kotak teks atau area teks dalam formulir. Anda dapat menggunakan peristiwa onkeyup untuk memicu penghitung yang menghitung penekanan tombol.
Kita buat sebuah contoh program dengan nama keyboard.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan event ketikan keyboard</title>
<script>
function bacaTuts() {
var jumlahkarakter =document.getElementById("text").value.length;
var hasil = "Jumlah karakter: " + jumlahkarakter;
document.getElementById("status").innerHTML=hasil;
}
</script>
</head>
<body>
<h1>Menghitung jumlah karakter pada textarea</h1>
<p>Masukkan teks ke dalam kotak teks</p>
<textarea id="text" cols="50" rows="20" onkeyup="bacaTuts()"></textarea><br>
<p id="status"></p>
</body>
</html>Proses penghitungan karakter pada contoh di atas menggunakan fungsi document.getElementById(“text”).value.length;
Penanganan event oleh jQuery
JQuery menggunakan pendekatan yang sedikit berbeda untuk menangani event. Ketimbang mengandalkan atribut event HTML dalam elemen, ia memantau peristiwa di browser dan memungkinkan kita untuk mengetuknya secara langsung. Ini membantu menyederhanakan berbagai hal, karena kita tidak perlu memisahkan antara kode HTML dan kode jQuery. Semua yang kita butuhkan ada dalam kode jQuery.
Event-event jQuery
jQUery menyederhanakan penanganan event pada HTML. Dampak paling besar adalah kita tidak perlu lagi menentukan atribut elemen pada HTML, semuanya sudah ditangani langsung oleh jQUery.
Sebagai contoh, penanganan sebuah event onclick padabutton kita tinggal menggunakan kode seperti ini:
$("button").click(function() {
kode
});Fungsi di atas untuk menangani event klik button yang apabila ditulis dalam bentuk HTML seperti ini :
<button>Klik di sini</button>Sebagian besar, fungsi event jQuery mencerminkan atribut event HTML, tetapi meninggalkan bagian dalam nama event. Namun, ada beberapa fungsi event yang tersedia. Tabel berikut memperlihatkan daftar event jQuery yang kemungkinan besar akan sering gunakan.
| Event | Deskripsi |
|---|---|
| blur() | Memicu ketika elemen kehilangan jendela fokus |
| change() | Memicu ketika elemen berubah |
| click() | Memicu ketika mouse diklik |
| dblclick() | Memicu ketika mouse di-dobel klik |
| focus() | Memicu ketika sebuah elemen mendapat fokus |
| focusin() | Memicu ketika sebuah elemen atau anak elemen mendapat fokus |
| focusout() | Memicu ketika elemen atau elemen turunan kehilangan fokus jendela |
| hover() | Mendefinisikan dua fungsi — satu untuk saat penunjuk mouse berada di atas elemen dan satu lagi untuk ketika ia pergi |
| keydown() | Memicu ketika tombol keyboard ditahan |
| keypress() | Memicu ketika tombol ditekan dan dilepaskan |
| keyup() | Memicu ketika kunci dilepaskan |
| mousedown() | Memicu ketika tombol mouse utama ditahan |
| mouseenter() | Memicu ketika kursor mouse memasuki area elemen |
| mouseleave() | Memicu ketika kursor mouse meninggalkan area elemen |
| mousemove() | Memicu ketika kursor mouse bergerak |
| mouseout() | Memicu ketika kursor mouse meninggalkan area elemen |
| mouseover() | Memicu ketika kursor mouse berada di atas area elemen |
| mouseup() | Memicu ketika tombol mouse utama dilepaskan |
| ready() | Memicu ketika pohon DOM terisi penuh |
| resize() | Memicu ketika jendela browser telah berubah ukurannya |
| scroll() | Memicu saat pengguna menggunakan bilah gulir (scroll) mouse |
| select() | Memicu ketika item dipilih |
| submit() | Pemicu ketika tombol kirim / submit telah diklik |
Salah satu fitur yang sangat berguna adalah fungsi hover(). Fitur ini memungkinkan kita untuk menentukan dua fungsi terpisah pada saat yang sama – satu untuk ketika mouse melayang di atas elemen dan yang lain ketika keluar area elemen.
Mari kita coba bereksperiman dengan fitur ini. Buat sebuah file dengan nama hoverEvent.html, lalu isi dengan kode berikut
<!DOCTYPE html>
<html>
<head>
<title>Event Mouse</title>
<style>
.kuning {
background-color: yellow;
width: 400px;
}
.merah {
background-color: red;
width: 400px;
}
</style>
<script src="jquery-3.5.1.min.js"></script>
<script>
jQuery(document).ready( function() {
$("p").hover( function() {
$(this).addClass("merah");
},
function() {
$(this).removeClass("merah");
});
});
</script>
</head>
<body>
<h1>Latihan Event Mouse</h1>
<p class="kuning">Ini adalah bagian konten yang berubah warna!</p>
<p>Ini juga bagian konten yang mengalami perubahan warna!</p>
</body>
</html>Contoh event hover mouse
Pada program di atas, eksekusi dijalankan pada bagian
jQuery(document).ready( function() {
$("p").hover( function() {
$(this).addClass("merah");
},
function() {
$(this).removeClass("merah");
});
});Anda tentunya sudah mengenali baris pertama, yang memberi tahu jQuery untuk menunggu sampai browser memuat dokumen sebelum menjalankan kode fungsi. Kode fungsi memilih semua elemen p lalu menetapkan fungsi peristiwa hover() kepada mereka. Dalam contoh ini, kita membuat dua elemen p untuk menunjukkan fitur rapi lainnya di jQuery.
Ketika kita mengarahkan mouse ke atas setiap elemen p, hanya elemen p yang berubah warna latar belakangnya! Kunci untuk itu adalah objek $(this) di jQuery. Obyek $(this) ini merepresentasikan obyek yang saat ini dipilih. Dengan menggunakan itu, elemen p mana pun yang memicu peristiwa adalah elemen addClass() yang diterapkan, sementara elemen p lainnya diabaikan. Itu menghemat banyak kode dari ke harus secara unik mengidentifikasi setiap elemen p di halaman web! Gambar 4-5 menunjukkan hasil dari program yang sedang beraksi.
Contoh di atas menunjukkan betapa mudahnya untuk membuat kode event dengan jQuery. Salah satu tujuan utama jQuery adalah untuk membuat pengkodean untuk menangani event lebih mudah, dan mereka berhasil dengan baik!
Event handler jQuery
Library jQuery juga menyediakan cara untuk membuat kode Event Handler. Dengan jQuery, fungsi event handler dipanggil on(). Berikut format untuk fungsi on():
$(selector).on("event", "filter", data, function() {
kode
});Bagian selector yang harus kita pahami sekarang. Selector menentukan elemen mana yang melekat pada penanganan event. Parameter event menentukan event jQuery untuk dilampirkan ke elemen.
Parameter filter sedikit berbeda. Ini mendefinisikan pemilih anak ke pemilih utama yang kita tentukan. Misalnya, jika kita hanya ingin menangkap klik peristiwa pada tombol di dalam bagian elemen artikel, Anda akan menggunakan cara berikut:
$("artikel").on("click", "button", function() {Contoh program eventHandler.html :
<!DOCTYPE html>
<html>
<head>
<title>Latihan menggunakan event mengetik jQuery</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
jQuery(document).ready( function() {
$("textarea").on("keyup", function() {
var jumlah = $(this).val().length;
var hasil = "Jumlah karakter: " + jumlah;
$("#status").text(hasil);
});
});
</script>
</head>
<body>
<h1>Latihan mengetik</h1>
<p>Silakan mengetikkan teks ke dalam kotak teks berikut ini</p>
<textarea cols="50" rows="10"></textarea><br>
<p id="status"></p>
</body>
</html>Jalankan program eventHandler.html di atas menggunakan browser untuk melihat hasilnya. Apabil tidak ada aral melintang, seharusnya menghasilkan seperti pada gambar di bawah
Satu hal yang harus kita akui tentang kode jQuery: Ini jauh lebih bersih terlihat daripada versi JavaScript! Perhatikan bahwa sekarang kita tidak perlu mendefinisikan atribut event di tag. Semua hal itu sudah dibereskan oleh jQuery.
Seperti biasa, proses dimulai dengan menunggu dokumen DOM dimuat lalu menetapkan penanganan event ke elemen area teks di halaman web. Penanganan event mencari event keyup; ketika terdeteksi, fungsi handler mengambil panjang teks di area teks (sekali lagi, menggunakan $(this) lalu menampilkannya ke area elemen status p.
Untuk menentukan penangan kejadian yang hanya memicu sekali dan hilang, gunakan fungsi one() alih-alih fungsi on(). Untuk menghapus penanganan kejadian yang telah Anda tentukan untuk pemilih, gunakan fungsi off().
