Belajar jQuery (Part 5) - Event Listener pada jQuery dan Penggunaan this

Pada artikel sebelumnya kita telah belajar tentang bagaimana penggunaan selector dan manipulasi DOM dengan jQuery. Pada dasarnya code yang kita buat sebelumnya hanya akan berjalan pada saat browser pertama kali menjalankan fungsi tersebut. Lalu bagaimana caranya agar code manipulasi DOM yang kita buat bisa berjalan saat ada aksi/event tertentu yang memicunya ? Misalnya kita hanya akan merubah text pada dokumen saat tombol tertentu diklik, untuk itu kita memerlukan event listener.

Untuk melakukan aksi pada saat klik tombol, kita perlu menggunakan event onclick. Pada jQuery kita dapat mengakses event ini dengan menggunakan fungsi click(). Berikut adalah contoh sederhananya :

HTML :

Tekan Saya

jQuery :

$(#tombol).click(function(e) {

     alert(Anda telah menekan tombol);

});

Pada contoh di atas kita menentukan element yang kita beri aksi onclick adalah element dengan id tombol. Aksi yang kita berikan adalah menampilkan alert berupa pesan “Anda telah menekan tombol”.

Mudah bukan ?  Penggunaan event onclick ini dapat diberikan pada element apa saja, tidak hanya tombol (button). Untuk lebih jelasnya, berikut adalah contoh manipulasi DOM dengan menggunakan event onclick ini dan selector yang telah kita pelajari sebelumnya.

HTML :



Cetak Alamat

Di sini akan tampil alamat yang diinginkan.

jQuery :

$(#cetak).click(function(e) {

     let alamat = $(input[name=alamat]).val();

     $(#tampil).text(alamat);

});

Pada contoh di atas, kita memberi aksi pada saat menekan button dengan id cetak yang jika ditekan akan menampilkan text hasil input alamat pada element dengan id tampil. Lalu bagaimana jika kita ingin menampilkan hasil input alamat tanpa harus menekan button terlebih dahulu ? Dalam kasus ini kita perlu menggunakan event listener lain yaitu fungsi keyup(). Fungsi keyup() ini akan berjalan ketika kita mengetik sesuatu pada keyboard.

Berikut adalah contoh penggunaannya :

HTML :



Cetak Alamat

Di sini akan tampil alamat yang diinginkan.

jQuery :

$(#cetak).click(function(e) {

     let alamat = $(input[name=alamat]).val();

     $(#tampil).text(alamat);

});

Pada contoh di atas dapat dilihat kita menggunakan fungsi keyup() ini hampir sama dengan fungsi click(). Hanya saja aksi yang kita inginkan mengacu pada element input alamat dan bukan button lagi. Pada saat kita mengetik sesuatu pada input alamat, maka setiap terjadi perubahan pada input tersebut akan menampilkan hasilnya secara otomatis pada element dengan id tampil. Tentu saja ada fungsi lain yang menggunakan aksi pengetikan, yaitu keydown() dan keypress(). Tetapi kedua fungsi tersebut berbeda penggunaannya, keydown() akan terpicu ketika kita menekan tombol di keyboard sebelum tahu tombol apa yang sedang ditekan. Sedangkan keypress() akan terpicu jika kita menekan tombol keyboard dan berhasil ditekan tetapi sebelum browser memasukkan yang diketik ke input. Kedua fungsi keydown() dan keypress() ini tidak bisa kita gunakan pada contoh diatas karena input alamat yang kita inginkan apa yang diketiklah yang dimunculkan.

Mungkin anda akan bertanya-tanya, apa maksud dari “this” pada code di atas ? “this” ini mengacu pada konteks fungsi yang kita jalankan, karena kita menjalankan fungsi keyup() pada element input dengan name alamat, maka “this” mengacu pada element tersebut. Sehingga kita tidak perlu lagi menggunakan selector yang sama berkali-kali selagi konteks penggunaannya masih pada element tersebut. Jika tanpa menggunakan “this”, kita akan menulisnya seperti berikut :

Tanpa “this” :

$(input[name=alamat]).keyup(function(e) {

     let alamat = $(input[name=alamat]).val();

     $(#tampil).text(alamat);

});

Jadi lebih singkat dengan menggunakan “this” bukan ? Tapi itu bukan kegunaan utama dari “this” itu sendiri. Seperti yang telah dijelaskan sebelumnya penggunaan “this” ini mengacu pada konteks fungsi yang dijalankan, sehingga tidak bisa digunakan di sembarang tempat.

Menggunakan “this” akan terasa sangat bermanfaat jika kita menggunakan perulangan untuk banyak element yang menggunakan penanda selector yang sama. Misalnya kita punya daftar yang banyak dan masing-masing daftar jika ditekan akan menampilkan alert yang berbeda sesuai dengan isi daftarnya. Untuk lebih jelasnya mungkin bisa dilihat dari contoh berikut :

HTML :
<ul>
	<li class=daftar data-warna=Biru>Satu</li>
	<li class=daftar data-warna=Merah>Dua</li>
	<li class=daftar data-warna=Kuning>Tiga</li>
	<li class=daftar data-warna=Hijau>Empat</li>
	<li class=daftar data-warna=Pelangi>Lima</li>
</ul>

jQuery :

$(li.daftar).click(function(e) {

     let jumlah = $(this).text();

     let warna = $(this).attr(data-warna);

     alert(Ada  + jumlah +  Warna  + warna);

});

Masih ada satu lagi event yang sering dipakai yaitu onchange. Event ini pada jQuery bisa digunakan dengan fungsi change(). Cara penggunaannya hampir sama dengan click() dan keyup(). Fungsi change() ini mendeteksi adanya perubahan yang terjadi pada sebuahelement select.Berikut adalah contoh penggunaannya :

HTML :Pilih KendaraanSepedaMotorMobil



jQuery :

$(#kendaraan).change(function(e) {

     let kendaraan = $(this).val();

     if(kendaraan) {

          alert(Saya berangkat menggunakan  + kendaraan);

     }

});

Mungkin segitu dulu tentang penggunaan event listener dan penggunaan “this”, untuk event listener sendiri sebenarnya masih banyak fungsi lain yang bisa digunakan selain fungsi click(), keyup() dan change(), tapi itu yang biasanya digunakan. Untuk lebih lengkap tentang apa saja event listener yang tersedia pada jQuery, anda dapat melihatnya di halaman dokumentasi resmi jQuery pada https://api.jquery.com/category/events/.