Rumah  >  Artikel  >  Terdapat beberapa cara untuk menambah acara jquery

Terdapat beberapa cara untuk menambah acara jquery

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌asal
2023-06-21 14:53:572549semak imbas

Cara-cara untuk menambah acara jquery ialah: 1. Gunakan JavaScript terus pada tag, kodnya ringkas dan mudah difahami tanpa memperkenalkan perpustakaan atau fail lain 2. Gunakan "onclick" "onmouseover" dan kaedah lain untuk menyusun semula ke dalam fail JavaScript yang berasingan, lebih mudah untuk mengurus dan berkongsi 3. acara mengikat ".bind()" boleh mengikat berbilang pengendali acara kepada satu elemen delegasi Pengendali acara boleh mengurangkan kerumitan kod.

Terdapat beberapa cara untuk menambah acara jquery

Sistem pengendalian untuk tutorial ini: Sistem Windows 10, versi jQuery 3.6.0, komputer Dell G3.

jQuery menyediakan banyak cara untuk menambah pengendali acara, berikut ialah empat daripadanya:

1 Gunakan JavaScript terus pada teg

   ```HTML
   <button onclick="alert(&#39;Hello world!&#39;)">Click Me</button>
   ```

Kelebihan:

  • Kod ini ringkas dan mudah difahami

  • Tidak perlu memperkenalkan perpustakaan atau fail lain

Kelemahan:

  • Tidak kondusif untuk penyelenggaraan dan penggunaan semula

  • Gandingan tinggi, kod JavaScript dan HTML dicampur bersama

2. Gunakan kaedah elemen `onclick` / `onmouseover` dsb.

   ```HTML
   <button id="foo">Click Me</button>
   ```
   ```javascript
   $(&#39;#foo&#39;).click(function() {
     alert(&#39;Hello world!&#39;);
   });
   ```

Kelebihan:

  • Dengan Perbandingan langsung untuk menggunakan JavaScript pada teg, kod itu boleh disusun semula menjadi fail JavaScript yang berasingan, menjadikannya lebih mudah untuk diurus dan dikongsi

  • Menyokong panggilan berantai

Kelemahan:

  • Pendekatan ini boleh menjadi kasar dan sukar untuk dikekalkan jika terdapat sejumlah besar acara dan pengendali untuk disediakan

  • Kaedah objek bergantung pada kitaran hayat objek itu sendiri

3. Gunakan `.bind()` untuk mengikat peristiwa

   ```HTML
   <button id="foo">Click Me</button>
   ```
   ```javascript
   var foo = function() {
     alert(&#39;Hello world!&#39;);
   };
   $(&#39;#foo&#39;).bind(&#39;click&#39;, foo);
   ```

Kelebihan:

  • Boleh mengikat berbilang pengendali acara kepada satu elemen

  • `$.bind()` dan ` Kaedah $.unbind()` boleh digunakan untuk memantau proses pendaftaran/penyahdaftaran acara

Kelemahan:

  • Dihentikan penggunaannya dalam versi jQuery 3.0 Sebaliknya daripada `.bind()`, adalah disyorkan untuk menggunakan `.on()`

4. Gunakan `.on()` untuk mengikat acara

Berikut ialah kod sampel untuk mengikat acara menggunakan kaedah `.on()` jQuery:

```javascript
$(document).on(&#39;click&#39;, &#39;#myButton&#39;, function() {
  // 事件处理程序
});
```

Kaedah `.on()` boleh menerima tiga parameter. Parameter pertama ialah jenis acara yang akan didengari/terikat; parameter kedua ialah rentetan pemilih pilihan atau nod DOM, digunakan untuk mengehadkan set elemen respons, parameter ketiga ialah fungsi panggil balik, iaitu apabila peristiwa itu berlaku tindakan untuk dilaksanakan.

Kelebihan:

  • Kaedah `.on()` membolehkan anda menambah berbilang pengendali acara untuk dokumen/elemen dengan fleksibiliti yang hebat.

  • Pengendali acara yang ditambahkan boleh dialih keluar melalui kaedah `off()`. Kaedah

  • `.on()` juga menyokong pengendali acara yang diwakilkan, yang akan mengurangkan kerumitan kod dengan banyak apabila mengendalikan sejumlah besar elemen atau menambahkan elemen secara dinamik.

Kelemahan:

  • Bergantung pada bilangan acara dan elemen yang dilampirkan, mengikat secara langsung banyak pengendali acara boleh menyebabkan masalah prestasi.

  • Anda tidak boleh menggunakan `.on()` dalam kod lama dengan versi jQuery lebih rendah daripada 1.7, anda perlu menggunakan kaedah lain seperti `.bind()` (anda perlu memberi perhatian kepada kaedah ini juga akan ditamatkan pada masa hadapan) dan `.delegate()`.

Atas ialah kandungan terperinci Terdapat beberapa cara untuk menambah acara jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn