Rumah > masalah biasa > teks badan

Terdapat beberapa cara untuk menambah acara jquery

尊渡假赌尊渡假赌尊渡假赌
Lepaskan: 2023-06-21 14:53:57
asal
2570 orang telah melayarinya

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>
   ```
Salin selepas log masuk

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;);
   });
   ```
Salin selepas log masuk

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);
   ```
Salin selepas log masuk

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() {
  // 事件处理程序
});
```
Salin selepas log masuk

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan