Mengendalikan acara adalah salah satu sebab besar untuk menggunakan jQuery. Terdapat beberapa perbezaan antara penyemak imbas dalam cara melakukannya, yang jQuery menormalkan menjadi satu API sederhana, sambil menerapkan beberapa amalan terbaik.
Terdapat asasnya satu kaedah yang perlu anda ketahui: .on()- ia berfungsi seperti ini:
$("button").on("click", function() ( // do something ));Di sini kami memberikan .on()kaedah hanya dua parameter. Nama acara ("klik") dan fungsi untuk dijalankan ketika peristiwa itu terjadi pada salah satu elemen dalam pilihan tersebut. Membaca dengan cukup bersih, bukan?
Orang yang mempunyai beberapa pengalaman jQuery terdahulu mungkin tidak biasa dengan kaedah mengikat lain suka .bind(), .live(), atau .delegate(). Jangan bimbang tentang perkara itu lagi, jQuery moden telah menggabungkan semuanya menjadi .on()amalan terbaik.
Semasa mengikat acara seperti yang kita lakukan di atas, anda dapat (dan biasanya pintar) memasukkan nama parameter dalam fungsi. Parameter itu akan menjadi "objek peristiwa" di dalam fungsi:
$("button").on("click", function(event) ( // event => "the event object" ));Melalui objek acara itu anda mendapat banyak maklumat. Anda sudah biasa dengannya kerana kami sudah biasa .preventDefault()dan .stopPropagation(). Tetapi terdapat juga banyak maklumat lurus ke atas objek tersebut. Perkara seperti jenis peristiwa itu (sekiranya beberapa peristiwa mengaktifkan fungsi yang sama), ketika ia berlaku, di mana ia berlaku (koordinat, jika berkenaan), elemen mana ia berlaku, dan banyak lagi. Perlu memeriksa objek acara secara berkala semasa membuat pengekodan.
Terdapat konsep perwakilan acara yang sangat penting dalam bekerja dengan acara. Ini adalah amalan terbaik zaman moden yang sangat pintar. Ia menggabungkan idea skop.
Cara tradisional untuk memikirkan pengikatan acara adalah seperti "cari semua butang di halaman, dan ikat acara klik kepada mereka." Itu tentu saja berkesan, tetapi ia:
- Tidak begitu cekap
- Rapuh
Tidak cekap kerana anda dengan segera memaksa JavaScript untuk mencari semua elemen butang itu apabila, dengan perwakilan, anda hanya dapat mencari satu elemen yang lebih mudah dicari.
Rapuh kerana jika lebih banyak butang ditambahkan ke halaman, mereka sudah terlepas perahu dan perlu diikat semula.
Dengan perwakilan acara, anda akan mengikat peristiwa klik itu ke elemen yang lebih tinggi dari pohon DOM daripada butang yang kebetulan mengandungi semuanya. Mungkin di suatu tempat, mungkin itu documentsendiri. Apabila anda mengikat peristiwa klik pada elemen yang lebih tinggi, anda memberitahu bahawa anda masih berminat dengan klik yang berlaku pada butang. Kemudian apabila butang diklik, melalui sifat peristiwa menggelegak, klik itu akhirnya akan memicu elemen yang lebih tinggi. Tetapi objek acara akan mengetahui sama ada klik asal berlaku pada butang atau tidak, dan fungsi yang telah anda tetapkan pada acara itu akan menyala atau tidak apabila mengetahui maklumat tersebut.
Dalam screencast ini, kami menunjukkan bahawa seperti ini:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Sekarang bayangkan jika kita menambah satu lagi itu . Kami tidak perlu mengikat semula acara apa pun, kerana acara itu masih terikat dengan ruang lingkup dan acara akan tetap naik dari teksarea yang baru ditambahkan. Ini sangat berguna dalam persekitaran aplikasi web di mana anda kerap menambahkan elemen baru ke halaman.
Satu lagi perkara baik yang perlu diketahui mengenai pengikatan acara jQuery adalah bahawa mereka tidak saling eksklusif. Sekiranya anda menambah pengendali klik lain ke elemen yang sama persis yang sudah ada, ia hanya akan menambah yang lain. Anda tidak menimpa yang sebelumnya. jQuery mengendalikannya dengan cukup anggun untuk anda Anda selalu boleh mengikatnya jika anda benar-benar mahu mengatasi fungsi yang sebelumnya terikat.
Sekiranya ia adalah peristiwa yang sama, perlu diketahui bahawa untuk membebaskan peristiwa tertentu dan bukan yang lain, anda perlu menamakan acara. Itu berlaku dengan menggunakan titik pada 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 bagaimana anda melepaskan ikatan peristiwa.
Terdapat banyak kemungkinan peristiwa DOM. Klik adalah yang utama dan jelas, tetapi terdapat dua kali klik, mouseenter dan mouseleave, keydown dan keyup, bentuk yang tertentu seperti kabur dan perubahan, dan banyak lagi. Sekiranya anda berminat dengan senarai lengkap, anda boleh mendapatkannya seperti ini.
Anda boleh mengikat pelbagai acara pada masa yang sama seperti ini:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Terdapat beberapa keadaan di mana anda sedang menunggu sesuatu peristiwa, tetapi setelah itu berlaku, anda tidak akan peduli lagi atau secara terang-terangan tidak mahu melepaskan fungsi yang telah anda terikat lagi. Itulah .one()fungsi. Kes penggunaan standard untuk itu adalah butang hantar borang (jika anda mengendalikan Ajax atau apa sahaja). Anda mungkin ingin mematikan butang hantar tersebut setelah mereka menekannya sehingga anda dapat memproses maklumat tersebut dan memberi mereka maklum balas yang sesuai. Itu bukan satu-satunya kes penggunaan, tetapi ingatlah perkara itu. .one()== sekali sahaja.