0Pricing
jQuery Academy · Pelajaran

Menerapkan Delegasi Peristiwa yang Tangguh

Pelajari prinsip dan manfaat delegasi peristiwa menggunakan .on() untuk menangani peristiwa pada banyak elemen maupun elemen yang ditambahkan kemudian dengan satu pemantau, sehingga kinerja meningkat.

Menerapkan Delegasi Peristiwa yang Tangguh adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar jQuery Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus jQuery Academy mencakup 3 pelajaran total.

Apa Itu Delegasi Peristiwa?

Selamat datang di delegasi peristiwa! Teknik andal ini membantu Anda mengelola peristiwa secara efisien dalam aplikasi web.

Alih-alih memasang banyak pendengar peristiwa pada setiap elemen, Anda memasang satu pendengar pada elemen induk yang sama. Ibaratnya memiliki satu 'pengawas' yang mengawasi semua 'anaknya' untuk tindakan tertentu.

Pengikatan Langsung: Sebuah Keterbatasan

Saat Anda mengikat peristiwa secara langsung ke elemen menggunakan .on() atau metode lain, pendengar hanya dipasang pada elemen yang ada tepat pada saat itu. Elemen baru apa pun yang ditambahkan ke DOM setelahnya tidak akan otomatis mendapatkan penangan peristiwa.

Dalam contoh ini, cobalah mengeklik tombol awal. Kemudian, setelah jeda singkat, tombol baru akan muncul. Cobalah mengeklik tombol baru tersebut—tombol itu tidak akan merespons!

$(document).ready(function() {
  // Assume basic HTML structure like:
  // <div id="my-list">
  //   <button class="item">Button 1</button>
  //   <button class="item">Button 2</button>
  // </div>

  // Direct binding to existing items
  $('.item').on('click', function() {
    $(this).text('Directly clicked!');
  });

  // Simulate adding a new item after initial binding
  setTimeout(function() {
    $('#my-list').append('<button class="item">New Item</button>');
    console.log('A new item was added after 2 seconds.');
    console.log('Try clicking the new item - it wont respond!');
  }, 2000);
});

Memahami Penggelembungan Peristiwa

Untuk memahami delegasi, Anda perlu mengetahui penggelembungan peristiwa. Saat suatu peristiwa (seperti klik) terjadi pada sebuah elemen, peristiwa tersebut pertama-tama dipicu pada elemen itu, kemudian pada induknya, lalu pada induk dari induknya, terus hingga ke document.

Properti event.target selalu merujuk pada elemen asli yang memicu peristiwa, apa pun elemen induk yang menangkapnya. Cobalah mengeklik elemen-elemen di bawah dan amati keluaran konsol.

$(document).ready(function() {
  // Assume HTML like:
  // <div id="outer">
  //   <div id="middle">
  //     <button id="inner">Click Me</button>
  //   </div>
  // </div>

  $('#outer').on('click', function(event) {
    console.log('Outer div caught event. Target:', event.target.id || event.target.tagName);
  });

  $('#middle').on('click', function(event) {
    console.log('Middle div caught event. Target:', event.target.id || event.target.tagName);
  });

  $('#inner').on('click', function(event) {
    console.log('Inner button caught event. Target:', event.target.id || event.target.tagName);
  });
});

.on() jQuery untuk Delegasi

Metode .on() milik jQuery dapat digunakan untuk delegasi peristiwa dengan memberikan argumen selector tambahan. Sintaksnya seperti berikut:

  • $(parentSelector).on(event, childSelector, handler);

Di sini, pendengar peristiwa dipasang pada parentSelector. Namun, fungsi handler hanya dijalankan jika peristiwa berasal dari elemen keturunan yang cocok dengan childSelector.

Contoh Delegasi Peristiwa

Sekarang mari terapkan delegasi peristiwa untuk mengatasi masalah dari Scene 2. Kita akan memasang pendengar pada container induk (#my-list), tetapi mengaturnya agar hanya bereaksi jika klik berasal dari elemen yang cocok dengan .item.

Perhatikan bahwa sekarang, saat tombol baru muncul, tombol tersebut akan merespons klik!

$(document).ready(function() {
  // Assume HTML structure like:
  // <div id="my-list">
  //   <button class="item">Button 1</button>
  //   <button class="item">Button 2</button>
  // </div>

  // Event delegation: listener on the parent (#my-list)
  // It listens for clicks on any descendant matching '.item'
  $('#my-list').on('click', '.item', function() {
    $(this).text('Delegated click!');
  });

  // Simulate adding a new item after delegation setup
  setTimeout(function() {
    $('#my-list').append('<button class="item">New Delegated Item</button>');
    console.log('A new item was added after 2 seconds.');
    console.log('Try clicking the new item - it WILL respond!');
  }, 2000);
});

Menangani Elemen Dinamis

Manfaat utama yang ditunjukkan pada contoh sebelumnya adalah kemampuan delegasi peristiwa untuk menangani elemen yang ditambahkan secara dinamis dengan baik.

Karena pendengar berada pada induk statis, setiap anak baru yang cocok dengan childSelector akan otomatis tercakup oleh satu pendengar tersebut. Anda tidak perlu mengikat ulang peristiwa setiap kali menambahkan konten!

Meningkatkan Kinerja

Selain menangani konten dinamis, delegasi peristiwa menawarkan keunggulan kinerja yang signifikan:

  • Lebih Sedikit Pendengar: Alih-alih memasang pendengar peristiwa terpisah pada ratusan elemen, Anda hanya memasang satu pada induk yang sama.
  • Penggunaan Memori Lebih Rendah: Lebih sedikit pendengar berarti lebih sedikit memori yang digunakan aplikasi Anda.
  • Memulai Lebih Cepat: Browser menghabiskan lebih sedikit waktu untuk menyiapkan penangan peristiwa saat halaman dimuat.

Kapan Mendelegasikan Peristiwa

Delegasi peristiwa adalah alat yang andal, tetapi tidak selalu diperlukan. Berikut adalah situasi yang ideal untuk menggunakannya:

  • Saat menangani banyak elemen serupa (misalnya, item dalam daftar panjang atau baris tabel).
  • Saat elemen ditambahkan atau dihapus secara dinamis dari DOM setelah halaman pertama kali dimuat.
  • Saat kinerja menjadi perhatian utama dalam penanganan peristiwa.

Praktik Terbaik Delegasi

Untuk mendapatkan manfaat maksimal dari delegasi peristiwa, ikuti praktik terbaik berikut:

  • Pilih Induk Statis Terdekat: Delegasikan ke leluhur terdekat yang dijamin sudah ada saat halaman dimuat. Hindari mendelegasikan ke document atau body jika ada induk yang lebih dekat.
  • Pahami $(this): Di dalam penangan yang didelegasikan, $(this) merujuk pada elemen asli yang cocok dengan childSelector, bukan elemen induk tempat pendengar dipasang.
  • Perhatikan Penggelembungan: Meskipun bermanfaat untuk delegasi, penggelembungan terkadang dapat menimbulkan efek samping yang tidak diinginkan jika tidak dikelola (misalnya, dengan event.stopPropagation(), yang dibahas dalam pelajaran lain).

Uji Pengetahuan Anda

Skenario manakah berikut ini yang ideal untuk menggunakan delegasi peristiwa?

Ringkasan Delegasi Peristiwa

Kerja bagus! Anda telah mempelajari prinsip-prinsip utama delegasi peristiwa dalam jQuery.

Kita telah membahas bagaimana .on() dengan childSelector memungkinkan satu listener induk menangani peristiwa untuk beberapa elemen anak, termasuk elemen yang ditambahkan secara dinamis. Teknik ini sangat penting untuk meningkatkan performa, menyederhanakan kode, dan menangani konten dinamis secara efisien dalam aplikasi jQuery Anda.

Menguasai delegasi akan membuat penanganan peristiwa Anda lebih tangguh dan mudah diskalakan!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menerapkan Delegasi Peristiwa yang Tangguh” gratis?

Ya — teks lengkap “Menerapkan Delegasi Peristiwa yang Tangguh” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus jQuery Academy, upgrade ke CoddyKit PRO. Kursus jQuery Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Menerapkan Delegasi Peristiwa yang Tangguh”?

Pelajari prinsip dan manfaat delegasi peristiwa menggunakan .on() untuk menangani peristiwa pada banyak elemen maupun elemen yang ditambahkan kemudian dengan satu pemantau, sehingga kinerja meningkat. Kamu berlatih jQuery Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai jQuery Academy?

Tidak diperlukan pengalaman sebelumnya. jQuery Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 3.

Berapa lama pelajaran “Menerapkan Delegasi Peristiwa yang Tangguh” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran jQuery Academy ini?

Ya. Setiap pelajaran jQuery Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Menerapkan Delegasi Peristiwa yang Tangguh
  2. Menghentikan Propagasi Peristiwa
  3. Membuat dan Memicu Peristiwa Kustom
← Kembali ke jQuery Academy