Ausführliche Diskussion über die JavaScript-Ereignisdelegierung

Was ist Event-Delegation?

Die Ereignisdelegation ist eine fortschrittliche Technik, die die DOM-Ereignisbehandlung in JavaScript effizienter und einfacher macht. Wenn wir einen Event-Handler anhängen, wird dieser normalerweise direkt an ein bestimmtes DOM-Element angehängt. Wenn jedoch viele untergeordnete Elemente vorhanden sind, ist das Anhängen eines separaten Ereignishandlers für jedes Element unnötig und nicht speichereffizient. Hier bietet sich die Delegation von Veranstaltungen an.

Die Ereignisdelegation funktioniert grundsätzlich auf Basis des „Event Bubbling“-Mechanismus. Durch diesen Mechanismus breitet sich das Ereignis von seinem beabsichtigten Ziel nach oben (zu den übergeordneten Elementen) aus, bis es das Dokument erreicht.

Was ist Event-Bubbling?

Ereignis-Bubbling ist ein Prozess, bei dem ein Ereignis von seinem innersten Zielelement ausgeht und nach und nach seine übergeordneten Elemente erreicht. Angenommen, Sie klicken auf eine , die sich in einem

befindet, und das

Wieder ein Das Tag enthält Das Klickereignis wird zuerst auf dem ausgelöst, sprudelt dann durch das

und schließlich auf dem bis zu reichen Diese von Erreichen des sprudelnden Ereignisses.

Wie funktioniert die Delegation einer Veranstaltung?

Mithilfe der Ereignisdelegation fügen wir einen Ereignis-Listener an das übergeordnete Element an und können auch Ereignisse von untergeordneten Elementen über Ereignis-Bubbling verarbeiten.

Zum Beispiel:

Klickereignisse in einer einfachen Liste verarbeiten

Angenommen, ich habe eine Liste mit vielen Li-Artikeln. Wenn Sie auf jedes Li-Element klicken, wird eine Meldung angezeigt.

htmlCopy code
<ul id="my-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  const myList = document.getElementById('my-list');

  // ইভেন্ট ডেলিগেশন ব্যবহার করে parent <ul> element-এ ইভেন্ট লিসেনার যোগ করা হলো
  myList.addEventListener('click', (e)=> {
    e.preventDefault();
    // নিশ্চিত করা হচ্ছে যে ক্লিকটি <li> element এ হয়েছে
    if (event.target.tagName === 'LI') {
      alert('You clicked on ' + event.target.textContent);
    }
  });
</script>

In diesem Code wird ein Ereignis-Listener nur dem ul-Element hinzugefügt. Immer wenn auf ein li-Element geklickt wird, wird das Ereignis in ul angezeigt, und aus event.target wissen wir, dass der Klick auf welchem ​​li-Element stattgefunden hat.

ইভেন্ট ডেলিগেশন কেন প্রয়োজন?

• কোড সহজ ও সংক্ষিপ্ত করা: যদি অনেক চাইল্ড এলিমেন্টের উপর ইভেন্ট হ্যান্ডলার যোগ করতে হয়, তবে ইভেন্ট ডেলিগেশন ব্যবহার করলে শুধুমাত্র একটি ইভেন্ট হ্যান্ডলার দিয়েই সবগুলো এলিমেন্টের ইভেন্ট পরিচালনা করা সম্ভব।
• পারফরম্যান্স বৃদ্ধি: প্রচুর সংখ্যক ইলিমেন্টের ইভেন্ট হ্যান্ডলার অ্যাসাইন করা ব্রাউজারকে ধীর করে দিতে পারে। কিন্তু ইভেন্ট ডেলিগেশন ব্যবহার করলে একটি ইভেন্ট হ্যান্ডলার পুরো প্যারেন্ট এলিমেন্টকে পরিচালনা করতে পারে, যা ব্রাউজারের কাজ সহজ করে।
• ডাইনামিক কন্টেন্ট হ্যান্ডলিং: যখন নতুন এলিমেন্ট ডাইনামিকভাবে অ্যাড করা হয়, তখন আলাদাভাবে ইভেন্ট হ্যান্ডলার অ্যাসাইন করতে হয় না। ইভেন্ট ডেলিগেশন ব্যবহার করলে প্যারেন্ট এলিমেন্টের ইভেন্ট হ্যান্ডলার এমন নতুন এলিমেন্টগুলোর ইভেন্টও হ্যান্ডল করতে পারে।

ধরা যাক, উপরের উদাহরণে আমরা DOM-এ নতুন li item যোগ করব এবং তাদের ক্লিক ইভেন্ট হ্যান্ডল করব।

htmlCopy code
<button id="add-item">Add Item</button>
<ul id="my-list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<script>
  const myList = document.getElementById('my-list');
  const addItemButton = document.getElementById('add-item');

  let itemCount = 2;

  addItemButton.addEventListener('click', (e)=>{
    e.preventDefault();
    itemCount++;
    const newItem = document.createElement('li');
    newItem.textContent = 'Item ' + itemCount;
    myList.appendChild(newItem);
  });

  myList.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      alert('You clicked on ' + event.target.textContent);
    }
  });
</script>

এখানে, আমরা একটি নতুন li item যোগ করার জন্য একটি বাটন যুক্ত করেছি। যখনই একটি নতুন item যোগ করা হবে, সেই item-এ ক্লিক করলে ul element-এ অ্যাটাচ করা ইভেন্ট লিসেনার তার ক্লিক ইভেন্টটি হ্যান্ডল করবে, এবং একটি মেসেজ দেখাবে।

ইভেন্ট ডেলিগেশন ছাড়া একই কাজ করা হলে কী সমস্যা হতো?

htmlCopy code
<ul id="my-list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<script>
  // প্রত্যেকটি <li> element এ আলাদাভাবে ইভেন্ট লিসেনার যোগ করা হচ্ছে
  const items = document.querySelectorAll('#my-list li');
  items.forEach(function(item) {
    item.addEventListener('click', function() {
      alert('You clicked on ' + item.textContent);
    });
  });
</script>

এই কোডে, প্রত্যেকটি li item-এ আলাদাভাবে ইভেন্ট লিসেনার যোগ করা হচ্ছে। কিন্তু এই পদ্ধতি বেশি মেমোরি ব্যবহার করে এবং যদি নতুন li item যোগ করা হয়, তখন সেই item-এ আলাদাভাবে ইভেন্ট লিসেনার অ্যাটাচ করতে হবে। ইভেন্ট ডেলিগেশন এই সমস্যাগুলো দূর করতে পারে।

উপসংহার

ইভেন্ট ডেলিগেশন একটি শক্তিশালী এবং কার্যকর টেকনিক যা আপনাকে জাভাস্ক্রিপ্টে DOM ইভেন্ট ম্যানেজমেন্টের ক্ষেত্রে সহজ, পরিষ্কার, এবং মেমোরি সাশ্রয়ী কোড লিখতে সাহায্য করে। এটি parent elements-এর ইভেন্ট লিসেনার ব্যবহার করে child elements-এর ইভেন্টগুলোকে হ্যান্ডল করার মাধ্যমে ডাইনামিক কনটেন্ট ম্যানেজমেন্টকেও সহজ করে তোলে।

Das obige ist der detaillierte Inhalt vonAusführliche Diskussion über die JavaScript-Ereignisdelegierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：dev.to

Vorheriger Artikel：Beherrschen der Ereignisdelegation von JavaScript Nächster Artikel：Einführung in WebRTC

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

• Gestalten Sie die Zukunft: Java-Programmierung für absolute Anfänger
  2024-10-13 13:32:21
• Sie sind nicht allein: Beherrschen Sie Python mit einer unterstützenden Community an Ihrer Seite
  2024-10-12 11:58:51
• Vom Anfänger zum Programmierer: Nutzen Sie die Leistungsfähigkeit der Python-Programmierung
  2024-10-11 20:06:51
• Denken Sie wie ein Programmierer: Erlernen der Grundlagen von Java
  2024-10-11 18:59:31
• Java leicht gemacht: Ein Leitfaden für Anfänger zur Programmierleistung
  2024-10-11 18:30:51
• Erstellen Sie einen Blog mit PHP: Ein anfängerfreundliches Projekt
  2024-10-11 15:51:51
• Sprechen Sie die Sprache der Systeme: Lernen Sie C, Zeile für Zeile
  2024-10-11 15:42:10
• Datenstrukturen und Algorithmen in C: Ein anfängerfreundlicher Ansatz
  2024-10-11 14:41:20
• Programmieren ohne Tränen: C auf einfache Weise lernen
  2024-10-11 14:08:31
• Datenanalyse mit Java: Ein Leitfaden für Anfänger zur Informationsverarbeitung
  2024-10-11 13:42:21

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

0

3

2437

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

0

11

2568

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

0

1

2174

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...

Aus 2024-04-18 23:52:34

0

1

2050

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

0

0

2153

verwandte Themen

Mehr>

• Gängige Codierungsmethoden
• Festplattenwiederherstellungsdaten
• So aktivieren Sie den TFTP-Server
• So überprüfen Sie, ob Port 445 geschlossen ist
• Datenwiederherstellung von Solid-State-Laufwerken
• Sie benötigen die Erlaubnis des Administrators, um Änderungen an dieser Datei vorzunehmen
• So verwandeln Sie zwei Seiten in ein Word-Dokument
• Einführung in Screenshot-Tastenkombinationen in Win10

Beliebte Empfehlungen

• Was bedeutet js
• Wie konvertiere ich einen String in ein Array in js?
• So aktualisieren Sie die Seite mit Javascript
• So löschen Sie ein Element im JS-Array
• So verwenden Sie die SQL-Funktion

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

• 
  Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)

  1427207
• 
  PHP-Einführungs-Tutorial eins: Lernen Sie PHP in einer Woche

  4277013
• 
  JAVA-Video-Tutorial für Anfänger

  2576309
• 
  Das nullbasierte Einführungsvideo-Tutorial von Little Turtle zum Erlernen von Python

  509974
• 
  PHP Zero-basiertes Einführungs-Tutorial

  867011

• 
  Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)

  1427207 Lernzeiten
• 
  JAVA-Video-Tutorial für Anfänger

  2576309 Lernzeiten
• 
  Das nullbasierte Einführungsvideo-Tutorial von Little Turtle zum Erlernen von Python

  509974 Lernzeiten
• 
  Kurze Einführung in die Web-Frontend-Entwicklung

  216235 Lernzeiten
• 
  Meistern Sie PS-Video-Tutorials von Grund auf

  898579 Lernzeiten

• 
  [Web-Frontend] Node.js-Schnellstart

  8184 Lernzeiten
• 
  Vollständige Sammlung ausländischer Full-Stack-Kurse zur Webentwicklung

  6500 Lernzeiten
• 
  Gehen Sie zur praktischen Anwendung von GraphQL

  5391 Lernzeiten
• 
  Der 550-W-Lüftermeister lernt Schritt für Schritt JavaScript von Grund auf

  738 Lernzeiten
• 
  Python-Meister Mosh, ein Anfänger ohne Grundkenntnisse, kann in 6 Stunden loslegen

  27466 Lernzeiten

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage

• [Formular-Schaltfläche] Kontaktcode für das jQuery-Enterprise-Nachrichtenformular
• [Spezialeffekte für Spieler] Wiedergabeeffekte für HTML5-MP3-Spieluhren
• [Menünavigation] HTML5 coole Partikelanimations-Navigationsmenü-Spezialeffekte
• [Formular-Schaltfläche] Drag-and-Drop-Bearbeitungscode für visuelle jQuery-Formulare
• [Spezialeffekte für Spieler] VUE.JS imitiert den Kugou-Musik-Player-Code
• [HTML5-Spezialeffekte] Klassisches HTML5-Pushing-Box-Spiel
• [Bildspezialeffekte] jQuery-Scrollen zum Hinzufügen oder Reduzieren von Bildeffekten
• [Fotoalbumeffekte] Persönlicher CSS3-Albumcover-Hover-Zoom-Effekt

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

• [PNG material] 可爱的夏天元素矢量素材(EPS+PNG)
• [PNG material] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
• [Banner image] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
• [PNG material] 金色的毕业帽矢量素材(EPS+PNG)
• [PNG material] 黑白风格的山脉图标矢量素材(EPS+PNG)
• [PNG material] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
• [Banner image] 扁平风格的植树节banner矢量素材(AI+EPS)
• [PNG material] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil