Acara yang berkesan mengikat dengan jQuery

Pengguna JQuery yang berpengalaman sudah biasa dengan mengikat acara, tetapi mengoptimumkannya meningkatkan kekukuhan kod dan kebolehkerjaan. Artikel ini meneroka teknik untuk mengikat acara jQuery yang lebih berkesan.

Penambahbaikan utama: Atribut data

• untuk pemilih: Menggunakan atribut data-hook dan bukannya kelas CSS memisahkan logik persembahan dan interaksi. Perubahan ke kelas CSS tidak akan memecahkan JavaScript. <https:> <https:> <li> Fungsi bernama sebagai pengendali: <strong> Menggantikan fungsi tanpa nama dengan fungsi yang dinamakan meningkatkan kebolehbacaan, membolehkan kebolehgunaan semula, dan memudahkan ujian. <https:> <https:> ruang nama untuk kawalan yang tepat: <li> Ciri ruang nama JQuery menyediakan kawalan berbutir ke atas peristiwa yang mengikat dan tidak mengikat, memudahkan pembersihan, terutamanya dalam plugin. <strong> <https:> <https:> <https:> Strategi pemilih yang dipertingkatkan: <p> <strong> <https:> Pertimbangkan menu nav mudah bertukar: <https:> <p> <https:> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> Menu toggle nav &lt;code class=&quot;html&quot;&gt; &lt;button data-hook=&quot;nav-menu-toggle&quot;&gt; &lt;https:&gt; &lt;nav data-hook=&quot;nav-menu&quot;&gt; &lt;ul&gt; West Philadelphia &lt;li&gt; &lt;a href=&quot;https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712&quot;&gt; &lt;https:&gt;&lt;a href=&quot;https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712cab&quot;&gt; Cab Whistling &lt;https:&gt; &lt;https:&gt; &lt;li&gt; &lt;a href=&quot;https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712throne&quot;&gt; Takhta duduk &lt;https:&gt; &lt;https:&gt; &lt;https:&gt; &lt;https:&gt; &lt;https:&gt; &lt;s&gt; &lt;https:&gt; bukannya bergantung pada kelas CSS: &lt;p&gt; &lt;https:&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; $ ('. Nav-menu-toggle'). Pada ('klik', fungsi () { $ ('nav'). Togol (); }); &lt;code class=&quot;javascript&quot;&gt; &lt;https:&gt; &lt;https:&gt; Gunakan &lt;p&gt; atribut data &lt;code&gt; untuk kod yang lebih berdaya tahan: &lt;https:&gt; &lt;https:&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; $ ('[data-hook = &quot;nav-menu-toggle&quot;]'). Pada ('klik', fungsi () { $ ('[data-hook = &quot;nav-menu&quot;]'). Togol (); }); &lt;code class=&quot;javascript&quot;&gt; &lt;https:&gt; &lt;https:&gt; Selanjutnya memperbaiki ini dengan fungsi jQuery tersuai: &lt;p&gt; &lt;https:&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; $. Extend ({ cangkuk: fungsi (hookName) { kembali $ (`[data-hook ~ =&quot; $ {hookName || '*'} &quot;]`); } }); $ .hook ('nav-menu-toggle'). ('klik', fungsi () { $ .hook ('nav-menu'). Togol (); }); &lt;code class=&quot;javascript&quot;&gt; &lt;https:&gt; &lt;https:&gt; Fungsi &lt;p&gt; ini &lt;code&gt; Hook memudahkan penggunaan pemilih dan membolehkan pelbagai nama cangkuk yang dipisahkan ruang pada satu elemen. &lt;https:&gt; &lt;https:&gt; &lt;p&gt; Mengelakkan fungsi tanpa nama: &lt;strong&gt; &lt;https:&gt; &lt;https:&gt; menggunakan fungsi bernama meningkatkan kebolehbacaan dan kebolehlihatan: &lt;p&gt; &lt;https:&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; fungsi togglenavmenu () { $ .hook ('nav-menu'). Togol (); }$ .hook ('nav-menu-toggle') pada ('klik', togglenavmenu); &lt;https:&gt; &lt;https:&gt; &lt;p&gt; &lt;strong&gt; Mengendalikan pelbagai peristiwa: &lt;https:&gt; &lt;https:&gt; &lt;p&gt; jQuery dengan cekap mengendalikan pelbagai peristiwa: &lt;https:&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; &lt;code class=&quot;javascript&quot;&gt; $. Hook ('nav-menu-toggle'). Pada ('klik keydown mouseEnter', trackAction); https://www.php.cn/link/29A9F8C8460E5E2BE4EDDE557FD83712HTTPS://www.php.cn/link/29A9F8C8460E5E2BERDE57F $ .hook ('nav-menu-toggle'). ({{ 'Klik': TrackClick, 'Keydown': Trackkeydown, 'MouseEnter': TrackMouseEnter }); httpps://www.php.cn/lininK/29A9F8C8460EE2E2BE4Edde5557 &lt;https:&gt; peristiwa yang tidak menentu dengan &lt;https:&gt; off () &lt;p&gt; memerlukan berhati -hati; Menggunakan ruang nama menghalang penyingkiran pengendali yang tidak berkaitan: &lt;code&gt; &lt;https:&gt; &lt;s&gt; https://www.php.cn/link/29a9f8c8460e5e2be4edde5557fd83712https://www.php.cn/link/29A9f8c8e2be5be2be2be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be2Be5. $ .hook ('click-track'). ON ('click.analytics', trackClick); https://www.php.cn/link/29A9F8C8460E5E2BE4EDDE557FD83712HTTPS://www.php.cn/link/29A9F8C8460E2E557FDEBDE57 $ .hook ('click-track'). off ('click.analytics'); https://www.php.cn/link/29A9F8C8460E5E2BE4EDDE557FD83712HTTPS://www.php.cn/link/29A9F8C8460E2BORYDE557 $ ('*'). Off ('. Analytics'); &lt;https:&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; &lt;code class=&quot;javascript&quot;&gt; &lt;https:&gt; Kesimpulan: &lt;https:&gt; &lt;p&gt; &lt;strong&gt; Teknik-teknik ini mencipta kod pengendalian peristiwa yang lebih mantap, boleh dipelihara, dan boleh diuji. Ruang nama amat berharga untuk aplikasi kompleks dan pembangunan plugin. Penggunaan atribut &lt;https:&gt; atribut &lt;https:&gt; dan fungsi yang dinamakan dengan ketara meningkatkan kejelasan kod dan mengurangkan risiko kesan sampingan yang tidak diingini. &lt;p&gt;&lt;/p&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/strong&gt;&lt;/p&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/code&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div></https:></s></https:>

Atas ialah kandungan terperinci Acara yang berkesan mengikat dengan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!