Pada tanggal 3 November 2011, jQuery merilis versi 1.7[1] dengan menambahkan dua cara baru untuk menyisipkan penanganan event (event handler) .on() dan .off(). Ini mungkin saja bukan perubahan besar bagi jQuery untuk sebuah rilis baru, namun hal ini merupakan hal yang tetap menarik untuk dibahas. Dua penanganan event tersebut merupakan hal terbaik untuk menyatukan beberapa penangan event yang akan membantu kita dalam menulis kode jQuery yang lebih rapi dan efisien kedepannya.
Pada artikel ini, akan dibahas secara singkat saja tentang perpindahan penangan event dari .bind(), .live() atau .delegate() menjadi .on() dan .off(). Setiap terjadi perubahan atau penambahan fungsi pada jQuery, dokumentasi resmi .on() dan .off() telah ditulis secara lengkap dan alangkah lebih baiknya jika anda membaca dokumentasi resminya yang sudah dilampirkan di setiap pembahasan di bawah ini jika menemukan masalah yang harus dipertanyakan.
Apakah Penangan Event (Event Handler)?
Mayoritas kode-kode JavaScript di picu oleh sebuah event. Page load ditangani sebuah event, anda menekan tombol atau klik tombol, ditangani oleh sebuah event, bahkan ketika anda memindahkan mouse, maka itu juga ditangani oleh sebuah event. Penanganan event (Event Handler) adalah nadi dari JavaScript untuk menceritakan apa yang harus dilakukannya pada berbagai situasi. Quirksmode[2] bahkan menuliskan bahwa "tanpa penanganan event tidak ada gunanya menambahkan JavaScript ke halaman Anda. Script terbaik adalah yang bereaksi terhadap apa yang dilakukan pengguna."
.on()[3]
Event handler .on() di buat untuk mengganti dua event handle yaitu .bind() dan .delegate(). Syntax ditulis seperti dibawah ini:$(elements).on(events [, selector] [, data], handler);Penjelasan:
- events adalah tipe event. Ini bisa saja merupakan satu atau lebih tipe event yang dipisahkan spasi, misal 'click' atau 'click keydown'. Hal ini dapat juga menggunakan nama tambahan, misal 'click.pluginku'.
- selector digunakan untuk menentukan elemen turunan yang memicu event. Ini adalah opsional, ini tidak termasuk kedalam event yang selalu memicu ketika elemen event terjadi/berlaku.
- data adalah beberapa data yang ingin anda sampaikan ke handler ketika event di picu. Ini juga opsional, dan digunakan pada objek biasa.
- handler adalah fungsi untuk mengeksekusi ketika event di picu.
Anda juga dapat menggunakan pemetaan event (eventsMap) untuk menentukan beberapa event yang terikat pada satu elemen.
$(elements).on(eventsMap [, selector] [, data]);Contoh :
$('#kontener a').on({
click: function() {
event.preventDefault();
console.log('item anchor diklik');
},
mouseenter: function() {
console.log('enter!');
}
});
Mengubah dari .bind() ke .on()
Jika anda sering menggunakan .bind() di dalam kode anda, anda perlu melakukan perubahan mudah ke .on(). Cukup dengan mengganti .bind() dengan .on().
// cara lama - .bind(events, handler);
$('#kontener a').bind('click', function(event) {
event.preventDefault();
console.log('item anchor diklik');
});
// cara baru (jQuery 1.7+) - on(events, handler);
$('#kontener a').on('click', function(event) {
event.preventDefault();
console.log('item anchor diklik');
});
Jangan berfikir anda harus membuat fungsi handler didalam .on(). Cara pemasangan kode handler yang akan memanggil fungsi terpisah.
// fungsi penanganan (handler)
function handleClick(event) {
event.preventDefault();
console.log('item anchor diklik');
}
$('#kontener a').on('click', handleClick);
Ini mempunyai manfaat tambahan yang memungkinkan anda untuk menghapus penanganan individu (individual handler) dengan menggunakan .off().
Mengubah dari .live() ke .on()
jQuery .live() tidak lagi dipergunakan pada versi 1.7. .live() pada awalnya di gunakan untuk melampirkan event handler pada elemen yang tidak tersedia di dalam DOM. Fungsi ini biasanya digunakan untuk menghasilkan halaman dinamis atau memuat konten, tetapi metode ini telah dianggap sebagai metode yang jelek untuk saat ini.
Terdapat beberapa masalah besar dengan .live(), sebagian pengembang kode mengeluhkan kinerja yang buruk pada halaman-halaman yang besar, respon yang lambat dan perilaku-perilaku yang aneh dengan .live() ketika diintegrasikan pada elemen dokumen. Namun sayangnya masih banyak sejumlah pengembang yang tetap menggunakan .live() pada kode-kode yang mereka buat. Jika anda merupakan salah satu pengembang yang tetap mempertahankan .live() maka mulai sekarang tinggalkan .live(). Kenapa? Silahkan baca pada artikel Joakim Ling dengan judul "Why jQuery Live is a bad option to use"[4] untuk memahami lebih jauh tentang kelemahan .live().
Lalu apa yang harus digunakan untuk menghasilkan konten dinamis? Kita harus beralih dan mendelegasikan handler menggunakan handler baru yaitu .on(). Asumsinya jika kita menambahkan konten dinamis untuk lemen DIV dengan DIV "kontener", dari pada menggunakan cara dibawah ini:
// jangan digunakan! - .live(events, handler)Lebih baik menggunakan cara dibawah ini:
$('#kontener a').live('click', function(event) {
event.preventDefault();
console.log('item anchor diklik');
});
// cara baru (jQuery 1.7+) - .on(events, selector, handler)
$('#kontener').on('click', 'a', function(event) {
event.preventDefault();
console.log('item anchor diklik');
});
Ini berfungsi menyisipkan event untuk setiap anchor ke dalam elemen div#kontener, mengurangi ruang lingkup akar dokumen elemen yang harus diperiksa dan meningkatkan efisiensi. Perhatikan! Persempit pencocokan selector, hal ini akan lebih efisien. Meskipun contoh di atas menggunakan anchor, cobalah untuk menghindari penyisipan handler pada setiap anchor. Akan lebih baik jika memberikan class atau id.
Mengubah dari .delegate() ke .on()
Jika kita menggunakan .delegate(), kode akan membutuhkan sedikit penyusunan ulang untuk bekerja pada .on(). Dengan .on(), parameter selector dan eventType harus dialih posisikan.
// cara lama - .delegate(selector, events, handler);Ini hanya perubahan untuk konversi dari .delegate().
$('#kontener').delegate('a', 'click', function(event) {
event.preventDefault();
console.log('item anchor diklik');
});
// cara baru (jQuery 1.7+) - on(events, selector, handler);
$('#kontener').on('click', 'a', function(event) {
event.preventDefault();
console.log('item anchor diklik');
});
.off()[5]
.off() adalah kebalikan dari .on() untuk menghentikan beberapa (atau semua) yang telah selesai dilakukan oleh .on(). Sintaks ditulis seperti dibawah ini:
$(elements).off( [ events ] [, selector] [, handler] );
Dengan .off() semua parameter adalah opsional. Penggunaan parameter akan memungkinkan untuk lebih spesifik dalam event handle yang ingin di nonaktifkan/dimatikan. Penulisan $(elements).off() akan menghapus semua event handle dari elemen.
Berpindah .unbind() ke .off()
Cukup mengganti .unbind() dengan .off() untuk (pada beberapa kasus) perubahan kode.// cara lama - .bind(events);
$('#kontener a').unbind('click');
// cara baru (jQuery 1.7+) - off(events);
$('#kontener a').off('click');
Jika anda ingin menghapus handle tertentu dan anda telah membuat fungsi handle terpisah, anda dapat menggunakan:
$('#kontener a').off('click', handleClick);
Menggunakan metode ini, memungkinakn untuk menghapus beberapa fungsionalitas event handler tanpa menghapus semua handle.
Mengubah dari .die() ke .off()
Ketika kita sudah tidak lagi menggunakan .live(), maka begitu pula seharusnya, tidak perlu lagi menggunakan .die().
// jangan digunakan! - .die(events)
$('#kontener a').die('click');
// cara baru (jQuery 1.7+) - .on(events, selector, handler)
$('#kontener').off('click', 'a');
Seperti halnya .live(), .die() juga tidak lagi digunakan. Memang sudah waktunya .die() untuk die! (mati!).
Mengubah dari .undelegate() ke .off()
Seperti .on(), urutan pada parameter ini hanya cukup di ubah posisi untuk konsistensi.// cara lama - .undelegate(selector, events);
$('#kontener a').undelegate('a', 'click');
// cara baru (jQuery 1.7+) - off(events, selector);
$('#kontener a').off('click', 'a');
.one()[6]
Ini digunakan jika anda menginginkan event hanya dapat diakses sekali. jQuery event handler .one() disisipkan pada penanganan untuk satu kali klik dan klik selanjutnya tanpa harus menuliskan kode tambahan. Walaupun .one() telah dimasukan kedalam jQuery, namun saya secara pribadi jarang melihat penggunaannya. Pada versi 1.7 telah diperbarui untuk memungkinkan penggunaan delegasi.
$(elements).one(events [, selector] [, data], handler);Parameternya adalah sama seperti halnya untuk .on().
Kesimpulan
Sekarang kita sudah sama-sama belajar sekilas pandang tentang .on() dan .off(). Saatnya kita berkreasi dengan imajinasi dan pengetahuan kita. Penulis hanya berharap, hal ini merupakan titik awal yang baik untuk bisa memicu kreatifitas saya dan anda untuk mempelajari serta menyelidiki lebih jauh pada penambahan event handle baru ini. Jika anda masih penasaran dan merasa kurang dengan informasi di atas, silahkan buka halaman demi halaman dokumentasi pada link catatan kaki. Dan saya sangat senang jika kemudian terjadi diskusi disini.
Credits :[1] jQuery 1.7 Released
[2] Introduction to Events
[3] Event Handler Attachment .on()
[4] Why jQuery Live is a bad option to use
[5] Event Handler Attachment .off()
[6] Event Handler Attachment .one()
[7] Special thanks to Andi Smith for great article
