Menangani peristiwa adalah salah satu alasan besar untuk menggunakan jQuery. Ada beberapa perbedaan lintas browser dalam cara melakukannya, yang dinormalisasi jQuery menjadi satu API sederhana, sambil menerapkan beberapa praktik terbaik.
Pada dasarnya ada satu metode yang perlu Anda ketahui: .on()- cara kerjanya seperti ini:
$("button").on("click", function() ( // do something ));Di sini kami memberikan .on()metode hanya dua parameter. Nama acara ("klik") dan fungsi yang akan dijalankan ketika peristiwa itu terjadi pada salah satu elemen dalam pilihan itu. Membaca dengan cukup rapi, bukan?
Orang dengan pengalaman jQuery sebelumnya mungkin akrab dengan metode mengikat lainnya seperti .bind(), .live(), atau .delegate(). Jangan khawatir tentang itu lagi, jQuery modern telah menggabungkan semuanya menjadi .on()yang selalu melakukan praktik terbaik.
Saat mengikat peristiwa seperti yang kita lakukan di atas, Anda dapat (dan biasanya cerdas) menyertakan nama parameter dalam fungsi. Parameter itu akan menjadi "objek acara" di dalam fungsi:
$("button").on("click", function(event) ( // event => "the event object" ));Melalui objek acara tersebut Anda mendapatkan banyak informasi. Anda sudah sedikit mengenalnya karena kita dulu .preventDefault()dan .stopPropagation(). Tetapi ada juga banyak informasi langsung lainnya di objek itu. Hal-hal seperti jenis peristiwanya (jika beberapa peristiwa mengaktifkan fungsi yang sama), kapan terjadinya, di mana terjadinya (koordinat, jika ada), di elemen mana ia terjadi, dan banyak lagi. Sebaiknya periksa objek acara secara teratur saat membuat kode.
Ada konsep delegasi acara yang sangat penting dalam menangani acara. Ini adalah praktik terbaik modern yang sangat cerdas. Ini menggabungkan gagasan ruang lingkup.
Cara tradisional untuk memikirkan tentang pengikatan peristiwa adalah seperti "temukan semua tombol di halaman, dan ikat peristiwa klik ke tombol tersebut". Itu tentu saja berhasil, tetapi ini:
- Tidak terlalu efisien
- Rapuh
Tidak efisien karena Anda segera memaksa JavaScript untuk menemukan semua elemen tombol tersebut ketika, dengan pendelegasian, Anda bisa saja menemukan satu elemen yang lebih mudah ditemukan.
Rapuh karena jika lebih banyak tombol ditambahkan ke halaman, mereka telah melewatkan perahu pada penjilidan dan harus diikat kembali.
Dengan delegasi peristiwa, Anda akan mengikat peristiwa klik tersebut ke elemen yang lebih tinggi di pohon DOM daripada tombol yang kebetulan berisi semuanya. Mungkin suatu tempat, mungkin menjadi documentdirinya sendiri. Saat Anda mengikat peristiwa klik ke elemen yang lebih tinggi tersebut, Anda mengatakan bahwa Anda masih hanya tertarik pada klik yang terjadi pada tombol. Kemudian ketika tombol diklik, melalui sifat peristiwa menggelegak, klik tersebut pada akhirnya akan memicu elemen yang lebih tinggi. Tetapi objek peristiwa akan mengetahui apakah klik asli terjadi pada sebuah tombol atau tidak, dan fungsi yang telah Anda aktifkan pada peristiwa itu akan aktif atau tidak dengan mengetahui informasi itu.
Dalam screencast ini, kami mendemonstrasikannya seperti ini:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Sekarang bayangkan jika kita menambahkan yang lain ke dalamnya . Kami tidak perlu mengikat ulang acara apa pun, karena acara tersebut masih terikat dengan senang hati ke ruang lingkup dan acara akan tetap muncul dari textarea yang baru ditambahkan. Ini sangat berguna dalam lingkungan aplikasi web tempat Anda menambahkan elemen baru ke halaman secara teratur.
Hal baik lainnya yang perlu diketahui tentang jQuery event binding adalah bahwa keduanya tidak eksklusif. Jika Anda menambahkan handler klik lain ke elemen yang sama persis dengan yang sudah ada, itu hanya akan menambahkan yang lain. Anda tidak menimpa yang sebelumnya. jQuery hanya menangani ini dengan cukup anggun untuk Anda. Anda selalu dapat melepaskannya jika Anda memang ingin mengganti fungsi yang sebelumnya terikat.
Jika kejadiannya persis sama, perlu diketahui bahwa untuk melepaskan salah satu dari mereka dan bukan yang lain, Anda harus memberi ruang nama pada kejadian tersebut. Itu terjadi dengan menggunakan titik di nama acara, seperti click.namespace.
$("#scope").on("click.one", "textarea", function(event) ( )); $("#scope").on("click.two", "textarea", function(event) ( )); // Just remove the first $("#scope").off("click.one", "textarea");.off(), seperti yang belum kami sebutkan sebelumnya, adalah cara Anda melepaskan peristiwa.
Ada banyak kemungkinan kejadian DOM. Klik adalah hal utama yang jelas, tetapi ada klik ganda, mouseenter dan mouseave, keydown dan keyup, bentuk spesifik seperti blur dan ubah, dan banyak lagi. Jika Anda tertarik dengan daftar lengkapnya, Anda bisa mendapatkannya seperti ini.
Anda dapat mengikat beberapa acara secara bersamaan seperti ini:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Ada beberapa keadaan di mana Anda menunggu suatu peristiwa terjadi, tetapi begitu hal itu terjadi, Anda tidak peduli lagi atau secara eksplisit tidak ingin mengaktifkan fungsi yang telah Anda jilid lagi. Itulah .one()fungsinya. Kasus penggunaan standar untuk itu adalah tombol pengiriman formulir (jika Anda menangani dengan Ajax atau apa pun). Anda mungkin pada dasarnya ingin menonaktifkan tombol kirim itu setelah mereka menekannya sampai Anda dapat memproses informasi itu dan memberi mereka umpan balik yang sesuai. Tentu saja itu bukan satu-satunya kasus penggunaan, tetapi ingatlah itu. .one()== hanya sekali.