Penjelasan terperinci tentang peristiwa yang terikat pada elemen dom dalam jQuery_jquery

Sebagai naluri profesional fanatik teknologi, apabila saya melihat fungsi produk teknikal, saya pasti tertanya-tanya bagaimana ia dilaksanakan. Sebagai contoh, setiap kali saya melihat antara muka yang menarik atau fungsi yang menarik pada tapak web orang lain, saya tidak boleh tidak membuka konsol penyemak imbas. . .

Baiklah, tanpa pergi terlalu jauh, mari kita bincangkan tentang perkara yang perlu anda lakukan apabila anda ingin melihat kod fungsi acara yang terikat pada elemen di tapak web.

Lihat kod fungsi acara terikat asli

Apa yang dipanggil asli adalah untuk mengikat elemen dom melalui kaedah addEventListener. Ini mudah dilakukan:

Periksa elemen yang terikat pada acara (klik kanan padanya ->Inspect elemen) Dalam konsol paparan Elemen pop timbul, klik tab "Pendengar Acara" di sebelah kanan dan kemudian anda boleh melihat semua elemen terikat pada elemen Apabila peristiwa berlaku, klik padanya, cari pengendali, klik kanan tetikus dan pilih menu "Tunjukkan Definisi Fungsi". Anda boleh melompat ke lokasi kod sumber fungsi acara yang terikat pada elemen. Terdapat gambar dan kebenaran:

Lihat kod fungsi acara yang diikat oleh jquery

Nah, saya tahu, anda telah menghadapi masalah, bukan? Untuk semua fungsi acara yang diikat oleh jquery, anda akan melompat ke kod jquery melalui kaedah di atas, dan ia akan sentiasa berada di tempat itu. Melihatnya sama seperti tidak melihatnya. Oleh itu, Saudara Bao ada di sini untuk mengajar anda cara melihat jquery.

Juga untuk memeriksa elemen klik pada paparan "Properties". Pilih yang pertama, kembangkannya dan cari atribut seperti 'jQueryxxxxx (rentetan nombor)', ingat nilainya (biasanya nombor) N

Kemudian beralih ke paparan Konsol di sebelah kiri dan laksanakan $.cache[N] dalam konsol N di sini ialah nilai atribut sebelumnya

Kemudian perkara yang terikat dengan elemen ini akan keluar. Kembangkan acara, dan akan terdapat fungsi sebenar yang anda ingin lihat. Klik kanan fungsi... selepas pemegang di bawah acara tertentu, dan kemudian pilih "Tunjukkan Definisi Fungsi" untuk melihatnya.

Contoh=》http://demo.sudodev.cn/frontend/jqDetectLihat kod fungsi acara yang terikat pada versi jquery2.x

Baiklah, saya tahu, anda mesti menghadapi masalah lagi. Kerana apabila anda menggunakan jquery2.x versi jquery, kaedah di atas tidak akan berfungsi lagi Sebabnya ialah struktur kod 2.x telah berubah. Malah, peristiwa versi 2.x masih menggunakan mekanisme cache, tetapi ia tidak didedahkan kepada luar seperti versi 1.x Sebaliknya, ia dikapsulkan dan wujud dalam data_priv objek penutupan, dan versi termampat jquery biasanya digunakan , anda tidak boleh melihat nama data_priv ini. Jadi selepas menyemak kod sumber versi jquery2.x, Brother Bao mengajar anda cara mencarinya:

Pergi terus ke konsol dan bina objek yang mengandungi jQuery untuk melihat jQuery dalam konsol. Sebagai contoh, masukkan var o={j:$} Kelebihan ini ialah anda boleh melihat semua sifat jQuery

dalam bar kawalan selepas pelaksanaan.

Kemudian kembangkan objek jQuery (di sini adalah j) dalam konsol, cari kaedah _queueHooks dan lihat bahawa kodnya mungkin "return L.get(a,c)||L.access...", tandakan it down Hidup di L ini mungkin L atau mungkin tidak L)

Kembangkan mana-mana objek peringkat pertama di bawah j, seperti _queueHooks di atas, cari Kembangkan, kemudian kembangkan Penutupan di bawah, cari gandingan "L" di hadapan, klik kanan pada huruf di belakangnya dan pilih "Simpan sebagai Pembolehubah Global ”

Kemudian objek tempX dipaparkan dalam konsol, yang mengandungi cache. Katakan ia dipanggil temp1. Temp1 itu mempunyai kaedah get yang boleh mendapatkan objek cachenya secara langsung. Katakan anda ingin melihat id objek yang terikat pada acara yang dipanggil clickMe. Kemudian laksanakan temp1.get($('#clickMe').get(0)) (atau temp1.get(document.querySelector('#clickMe')))) dan ia akan mencetak sesuatu yang setara dengan versi jquery1.x di atas

Contoh berikut adalah sama dengan kaedah jquery1.x di atas=》http://demo.sudodev.cn/frontend/jq2DetectSatu lagi:

Operasi di atas dilakukan di bawah penyemak imbas Chrome secara lalai. Sebenarnya, ia adalah serupa di bawah Firefox, saya percaya bahawa sebagai seorang juruteknik, anda sepatutnya boleh membuat kesimpulan daripada satu contoh. Bagi IE, eh... buat-buat saya tak cakap. :)

Kemas kini:

1. Untuk menyelamatkan masalah menyemak atribut, jquery1.x boleh terus melaksanakan $.cache[$('#clickMe').get(0)[$.expando]] pada konsol untuk mengeluarkan perkara yang terikat pada elemen, bukannya menyemak nilai atribut jQueryxxxxxxx pada elemen

2. Selepas semakan dan ujian artikel. Terdapat kaedah baharu yang pada masa ini paling menjimatkan tenaga kerja dan terpakai untuk jquery1 dan jquery2 Masukkan $._data($('#clickMe').get(0)) terus dalam konsol untuk mengeluarkan semua yang terikat pada elemen. Walau bagaimanapun, daripada komen dalam kod sumber jquery2, kami mendapati bahawa $._data akan dimansuhkan dalam versi akan datang. Jadi kaedah yang diperkenalkan di atas masih sangat berharga. Lebih baik mengajar orang memancing daripada mengajar mereka memancing, :)