jQuery: lebih dari satu penangan untuk acara yang sama

Apa yang terjadi jika saya mengikat dua penangan kejadian ke acara yang sama untuk elemen yang sama?

Sebagai contoh:

var elem = $("...")
elem.click(...);
elem.click(...);

Apakah pawang terakhir "menang", atau apakah kedua pawang akan lari?

Kedua penangan akan berjalan, model peristiwa jQuery memungkinkan beberapa penangan pada satu elemen, oleh karena itu penangan selanjutnya tidak menggantikan penangan yang lebih lama.

Pawang akan mengeksekusi sesuai urutan mereka terikat .

Misalkan Anda memiliki dua penangan, f dan g , dan ingin memastikan bahwa mereka dieksekusi dalam urutan yang diketahui dan tetap, maka rangkum saja:

$("...").click(function(event){
  f(event);
  g(event);
});

Dengan cara ini (dari perspektif jQuery) hanya ada satu penangan, yang memanggil f dan g dalam urutan yang ditentukan.

.bind () jQuery diaktifkan dalam urutan itu terikat :

Ketika sebuah kejadian mencapai sebuah elemen, semua penangan yang terikat ke tipe kejadian untuk elemen tersebut akan diaktifkan. Jika ada beberapa penangan yang terdaftar, mereka akan selalu mengeksekusi sesuai urutan mereka terikat. Setelah semua penangan dijalankan, acara berlanjut di sepanjang jalur penyebaran acara normal.

Sumber: http://api.jquery.com/bind/

Karena fungsi jQuery yang lain (mis. .click()) Adalah pintasan .bind('click', handler), saya kira fungsi-fungsi itu juga dipicu dalam urutan mengikatnya.

Anda harus bisa menggunakan chaining untuk mengeksekusi event secara berurutan, misalnya:

$('#target')
  .bind('click',function(event) {
    alert('Hello!');
  })
  .bind('click',function(event) {
    alert('Hello again!');
  })
  .bind('click',function(event) {
    alert('Hello yet again!');
  });

Saya kira kode di bawah ini melakukan hal yang sama

$('#target')
      .click(function(event) {
        alert('Hello!');
      })
      .click(function(event) {
        alert('Hello again!');
      })
      .click(function(event) {
        alert('Hello yet again!');
      });

Sumber: http://www.peachpit.com/articles/article.aspx?p=1371947&seqNum=3

TFM juga mengatakan:

Ketika sebuah kejadian mencapai sebuah elemen, semua penangan yang terikat ke tipe kejadian untuk elemen tersebut akan diaktifkan. Jika ada beberapa penangan yang terdaftar, mereka akan selalu mengeksekusi sesuai urutan mereka terikat. Setelah semua penangan dijalankan, acara berlanjut di sepanjang jalur penyebaran acara normal.

Kedua penangan dipanggil.

Anda mungkin berpikir tentang pengikatan acara inline (misalnya "onclick=..."), di mana kelemahan besar hanya satu penangan yang dapat ditetapkan untuk sebuah acara.

jQuery sesuai dengan model registrasi event DOM Level 2 :

Model Peristiwa DOM memungkinkan pendaftaran beberapa event listener pada satu EventTarget. Untuk mencapai ini, event listener tidak lagi disimpan sebagai nilai atribut

Berhasil berhasil menggunakan 2 metode: enkapsulasi Stephan202 dan beberapa event listener. Saya memiliki 3 tab pencarian, mari kita tentukan id teks masukan mereka dalam Array:

var ids = new Array("searchtab1", "searchtab2", "searchtab3");

Ketika konten searchtab1 berubah, saya ingin memperbarui searchtab2 dan searchtab3. Lakukan dengan cara ini untuk enkapsulasi:

for (var i in ids) {
    $("#" + ids[i]).change(function() {
        for (var j in ids) {
            if (this != ids[j]) {
                $("#" + ids[j]).val($(this).val());
            }
        }
    });
}

Beberapa pendengar acara:

for (var i in ids) {
    for (var j in ids) {
        if (ids[i] != ids[j]) {
            $("#" + ids[i]).change(function() {
                $("#" + ids[j]).val($(this).val());
            });
        }
    }
}

Saya suka kedua metode tersebut, tetapi programmer memilih enkapsulasi, namun pendengar beberapa acara juga bekerja. Kami menggunakan Chrome untuk mengujinya.

Ada solusi untuk menjamin bahwa satu penangan terjadi setelah penangan lainnya: pasang penangan kedua ke elemen penampung dan biarkan acara menggelembung. Di penangan yang dilampirkan ke penampung, Anda dapat melihat event.target dan melakukan sesuatu jika itu yang Anda minati.

Kasar, mungkin, tapi pasti berhasil.

jquery akan mengeksekusi kedua handler karena memungkinkan banyak event handler. Saya telah membuat kode contoh. Kamu bisa mencobanya

demo