Delegasi Acara dengan JQuery

mata teras

Perwakilan acara dalam jQuery adalah teknik untuk melampirkan satu pengendali acara ke elemen induk dan bukannya beberapa pengendali yang dilampirkan kepada unsur -unsur individu, dengan itu mengurangkan penggunaan memori dan meningkatkan prestasi.
Fungsi JQuery
• boleh digunakan untuk melaksanakan perwakilan acara, dan parameter kedua pilihan menentukan pemilih untuk pengendali acara perwakilan. Kemudian gunakan atribut on() untuk mengenal pasti elemen mana yang mencetuskan peristiwa tersebut. event.target
Dalam aplikasi dinamik, unsur -unsur sering ditambah atau dikeluarkan, dan perwakilan acara sangat berguna kerana ia menghapuskan keperluan untuk menguruskan peristiwa secara manual dan mengurangkan kerumitan kod. Walau bagaimanapun, perlu diperhatikan bahawa pengendali sub-peristiwa mengendalikan sebelum mewakilkan pengendali acara dan boleh menghalang acara daripada menyebarkan.

JQuery memudahkan pengendalian acara di JavaScript. Walau bagaimanapun, lebih banyak pengendali acara ditakrifkan, memori yang lebih banyak digunakan, yang akhirnya akan membawa kepada kemerosotan prestasi dan melambatkan UI. Artikel ini menerangkan bagaimana perwakilan acara dapat membantu mencegahnya, dan bagaimana perwakilan acara dapat digunakan dalam jQuery. Perwakilan acara adalah teknik pemprosesan peristiwa yang bukannya mengemukakan pengendali acara terus ke setiap elemen yang mendengar acara, ia menambahkan satu pengendali acara ke unsur induk unsur -unsur ini untuk mendengar untuk berlaku pada unsur -unsur anaknya. Apabila memproses acara, periksa elemen mana yang mencetuskan acara dan bertindak balas dengan sewajarnya. Perwakilan peristiwa bergantung kepada gelembung peristiwa di DOM. Ini adalah proses peristiwa yang dicetuskan pada kanak -kanak yang menyebarkan ke pokok Dom ke elemen induknya dan elemen induknya, dan sebagainya sehingga mencapai dokumen. Pengaturcara boleh menggunakan

untuk menghentikan menggelegak. Perhatikan bahawa tidak semua peristiwa DOM akan menyebarkan -fokus, kabur, beban, dan pemunggahan tidak akan. Perwakilan acara menggunakan memori yang kurang kerana anda menggantikan pengendali acara berganda dengan pengendali acara tunggal. Sebagai contoh, jika anda melampirkan pengendali acara untuk setiap pautan dalam senarai sepuluh pautan, akan ada sepuluh pengendali acara yang mengambil ruang ingatan. Sebaliknya, jika anda menggunakan perwakilan acara dan mengendalikan peristiwa di elemen induk, hanya satu pengendali acara yang dibuat dan memori kurang digunakan daripada memori yang dilampirkan pada setiap pautan secara berasingan. Di samping mengurangkan penggunaan memori, delegasi acara juga mempunyai kelebihan berikut: event.stopPropagation()

tidak perlu menguruskan peristiwa secara manual apabila menambah unsur -unsur ke atau mengeluarkan unsur -unsur dari DOM. Jika kita menggunakan pengendalian acara tradisional, kita mesti melampirkan pengendali acara ke elemen yang ditambahkan ke DOM dan mengeluarkan pengendali acara dari elemen yang dikeluarkan dari DOM.
Kurangkan kod yang akan diuruskan dengan pengendali acara yang lebih sedikit. Ini boleh menjadikan kod kami lebih mudah tanpa sebarang logik pengendalian acara pendua, yang membantu mengekalkan ringkas dan kering JavaScript kami.
Contoh delegasi acara dalam jQuery

Katakan anda sedang membangunkan satu aplikasi halaman yang menjual gambar anak kucing. Apabila halaman dimuatkan, 20 anak kucing teratas akan dipaparkan. Apabila pengguna menatal ke halaman, lebih banyak anak kucing akan dimuatkan. HTML kami kelihatan seperti ini:

<div id="cats">
  <ul>
    <li>
      <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt=""/>
      <a href="https://www.php.cn/link/207f170979dd72ff5776e20d07c28732">More info</a>
      <button>Add to cart</button>
    </li>
    ...
  </ul>
</div>

Menggunakan pengendalian acara tradisional, kita perlu menyambungkan pengendali acara ke:

1. Imej yang lebih besar dipaparkan apabila pengguna mengklik pada gambar kecil.
2. Maklumat lanjut dipaparkan apabila pengguna mengklik pautan "Maklumat Lanjut".
3. Tambahkan imej ke kereta apabila pengguna mengklik "Tambah ke Cart".
4. Lampirkan ketiga -tiga peristiwa ini ke elemen DOM baru ditambah apabila pengguna menatal ke halaman.

Kod ini akan sama dengan contoh berikut. Ambil perhatian bahawa ini bertujuan untuk menunjukkan bagaimana penambahbaikan pengendali acara kepada elemen individu berbeza daripada menggunakan perwakilan acara, jadi tidak ada pelaksanaan yang disediakan untuk fungsi loadImage(), moreInfo(), dan addToCart(). loadNewKittens()

$(document).ready(function() {
  var cats = $('#cats');

  cats.find('img')
    .on('click', function() {
      loadImage();
    })

  cats.find('a')
    .on('click', function(event) {
      event.preventDefault();
      moreInfo();
    });

  cats.find('button')
    .on('click', function() {
      addToCart();
    });

  $(window).scroll(function() {
    var fragment = loadNewKittens();
    // 为新的DOM元素附加事件处理程序
    fragment.find('img')
      .on('click', function() {
        loadImage();
      });

    fragment.find('a')
      .on('click', function(event) {
        event.preventDefault();
        moreInfo();
      });

    fragment.find('button')
      .on('click', function() {
        addToCart();
      });

    fragment.appendTo('#cats ul');
  });
});

Jumlah kod agak besar. Sekarang mari kita lihat bagaimana kod kami kelihatan jika kami menggunakan perwakilan acara:

$(document).ready(function() {
  $('#cats')
    .on('click', 'img, a, button', function(event) {
      event.preventDefault();
      var target = event.target;

      switch(target.tagName.toLowerCase()) {
        case 'img':
          loadImage();
          break;
        case 'a':
          moreInfo();
          break;
        case 'button':
          addToCart();
          break;
        default:
          // 什么也不做
      }
    });

  $(window).scroll(function() {
    var fragment = loadNewKittens();
    fragment.appendTo('#cats ul');
  });
});

Kunci terletak pada parameter kedua pilihan

. Dengan lulus pemilih di sini, on() tahu bahawa ia mengendalikan pengendali acara perwakilan dan bukannya pengendali acara yang terikat secara langsung. Kod pengendalian acara kami lebih mudah sekarang. Dengan mendapatkan on() dan bertukar berdasarkan event.target, kita dapat menentukan elemen mana yang mencetuskan peristiwa dan bertindak balas dengan sewajarnya. Di samping itu, kita tidak lagi perlu melampirkan pengendali acara ke unsur -unsur yang dimuatkan dalam tagName, kerana peristiwa yang dicetuskan oleh unsur -unsur baru ini diwakilkan kepada elemen induk. Potensi "perangkap" yang boleh diperhatikan apabila menggunakan perwakilan acara adalah bahawa mana -mana pengendali acara yang dilampirkan pada elemen kanak -kanak ditangani sebelum pengendali acara perwakilan mencetuskan $(window).scroll. Oleh itu, pengendali sub-peristiwa boleh memanggil atau kembali , yang akan menghalang peristiwa dari bubbled ke pengendali acara perwakilan dan meninggalkan anda hairan mengapa acara anda tidak diwakilkan. event.stopPropagation() false

Kesimpulan

Dalam artikel ini, kita mengkaji delegasi acara. Kami telah melihat bagaimana ia dapat membantu meningkatkan prestasi laman web dengan mengurangkan beban pemprosesan acara yang perlu ditanggung. Kami juga melihat bagaimana untuk melaksanakan perwakilan acara dalam jQuery melalui fungsi

.

on()

Soalan Lazim mengenai Delegasi Acara JQuery

Apakah perwakilan acara dalam jQuery dan mengapa ia penting?

Perwakilan acara dalam jQuery adalah teknik yang membolehkan anda melampirkan pendengar acara tunggal ke elemen induk, yang akan membakar semua keturunan pemilih yang sepadan, sama ada keturunan itu wujud sekarang atau ditambah pada masa akan datang. Ini penting kerana ia dapat meningkatkan prestasi dengan mengurangkan bilangan pengendali acara yang diperlukan oleh permohonan. Daripada menambahkan pengendali acara individu ke setiap elemen, anda boleh mewakilkan peristiwa kepada elemen ibu bapa. Ini amat berguna dalam aplikasi dinamik di mana elemen ditambah atau dikeluarkan secara dinamik.

Bagaimana delegasi acara berfungsi dalam jQuery?

Perwakilan acara dalam jQuery memanfaatkan hakikat bahawa kebanyakan peristiwa jQuery akan gelembung atau menyebarkan ke Dom Tree. Apabila peristiwa dipecat pada elemen kanak -kanak, ia akan gelembung ke elemen induknya. Dengan melampirkan pendengar acara ke elemen induk, anda boleh menangkap peristiwa yang dicetuskan pada mana -mana elemen anaknya. Atribut event.target boleh digunakan untuk menentukan elemen kanak -kanak yang mencetuskan peristiwa tersebut.

Apakah perbezaan antara peristiwa langsung dan peristiwa yang diwakilkan dalam jQuery?

peristiwa langsung dilampirkan secara langsung kepada unsur -unsur tertentu, dan hanya unsur -unsur ini dapat mencetuskan peristiwa. Sebaliknya, peristiwa perwakilan dilampirkan pada elemen induk, dan mana -mana elemen kanak -kanak boleh mencetuskan peristiwa. Kelebihan peristiwa perwakilan ialah mereka dapat mengendalikan peristiwa elemen kanak -kanak yang dinamik.

Bagaimana menggunakan kaedah .on() untuk melakukan delegasi acara dalam jQuery?

Kaedah .on() dalam jQuery digunakan untuk melampirkan pengendali acara. Untuk perwakilan acara, anda akan menggunakan tiga parameter: jenis acara, rentetan pemilih yang digunakan untuk menapis keturunan, dan fungsi pengendali. Jenis acara adalah rentetan yang mewakili jenis acara (contohnya, "klik"), rentetan pemilih digunakan untuk menapis keturunan elemen yang dipilih yang mencetuskan acara itu, dan fungsi pengendali adalah fungsi yang akan dilaksanakan apabila acara itu dicetuskan.

Bolehkah saya menggunakan perwakilan acara untuk mengendalikan elemen ditambah secara dinamik dalam jQuery?

Ya, salah satu kelebihan utama perwakilan acara dalam jQuery ialah ia dapat mengendalikan peristiwa unsur -unsur yang ditambah secara dinamik. Oleh kerana pendengar acara dilampirkan pada elemen induk, ia dapat menangkap peristiwa yang dicetuskan pada mana -mana elemen anaknya, walaupun peristiwa tersebut ditambah selepas pendengar acara dilampirkan.

Apa itu gelembung acara, dan apakah yang perlu dilakukan dengan delegasi acara dalam jQuery?

Bubble Event adalah jenis penyebaran peristiwa di mana peristiwa bermula dengan elemen tertentu yang mencetuskannya dan kemudian gelembung kepada nenek moyangnya. Perwakilan acara dalam jQuery Gunakan gelembung acara untuk melampirkan pendengar acara kepada elemen ibu bapa. Apabila peristiwa dipecat pada elemen kanak -kanak, ia akan gelembung ke elemen induk, di mana pendengar acara dapat menangkapnya.

Bagaimana untuk menghentikan penyebaran acara dalam jQuery?

anda boleh menggunakan kaedah .stopPropagation() untuk menghentikan penyebaran acara dalam jQuery. Kaedah ini menghalang peristiwa dari bubbled ke dalam pokok Dom, dengan itu menghalang mana -mana pengendali induk daripada menerima pemberitahuan acara. Walau bagaimanapun, anda harus menggunakannya dengan berhati -hati kerana ia akan menjadikan kod anda lebih sukar untuk debug dan difahami.

Apakah perbezaan antara

dan .bind() kaedah yang digunakan untuk pemprosesan acara dalam jQuery? .on()

Kaedah

dalam jQuery digunakan untuk melampirkan pengendali acara terus ke elemen. Sebaliknya, kaedah .bind() boleh digunakan untuk melampirkan pengendali acara terus ke elemen (seperti .on()) atau kepada elemen induk untuk mewakilkan acara. Kaedah .bind() lebih umum dan merupakan kaedah pilihan untuk melampirkan pengendali acara dalam jQuery. .on()

Bolehkah saya menggunakan perwakilan acara untuk mengendalikan acara tersuai dalam jQuery?

Ya, anda boleh menggunakan perwakilan acara untuk mengendalikan peristiwa tersuai dalam jQuery. Seperti peristiwa standard, anda boleh melampirkan pendengar acara ke elemen induk, yang akan menangkap peristiwa tersuai yang dicetuskan pada mana -mana anaknya.

Bagaimana untuk memadam pengendali acara dalam jQuery?

anda boleh menggunakan kaedah .off() untuk memadam pengendali acara dalam jQuery. Kaedah ini boleh digunakan untuk memadam semua pengendali acara pada elemen, atau untuk memadam hanya pengendali acara dengan jenis acara tertentu atau ruang nama yang dilampirkan.

Atas ialah kandungan terperinci Delegasi Acara dengan JQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!