Unterschied zwischen Event Bubbling und Capture in JavaScript
In diesem Artikel geht es um Event-Bubbling und Event-Capturing, die in JavaScript verwendet werden. Nachdem Sie diesen Artikel gelesen haben, werden Sie das Bubbling und Capturen von Ereignissen in JavaScript klar verstehen.
Wir werden auch die Unterschiede zwischen diesen Ereignissen besprechen. Wir werden sehen, wann das Bubbling und Capturing von Ereignissen in JavaScript verwendet wird.
In JavaScript beschreiben Ereignis-Bubbling und -Erfassung Phasen, in denen der Browser Ereignisse verarbeitet, die auf verschachtelte Elemente abzielen.
Lassen Sie uns diese beiden Ereignisse nacheinander verstehen.
Ereignissprudeln in JavaScript
Das Event-Bubbling ist eine in JavaScript verwendete Methode zur Ereignisweitergabe. Event Bubbling ist ein Prozess, der mit dem Element beginnt, das das Ereignis auslöst, und die enthaltenden Elemente der Reihe nach aufbläht.
Beim Event-Bubbling in JavaScript wird das Event zunächst vom innersten Element erfasst und verarbeitet und dann an die äußersten Elemente weitergegeben.
Das Prinzip des Eventsprudelns ist sehr einfach. Wenn ein Ereignis auf einem anderen Element auftritt, wird es zuerst auf den Handlern und dann auf seinem übergeordneten Element ausgeführt.
Es bezieht sich auf die Reihenfolge, in der Ereignisse in verschachtelten Elementen in JavaScript weitergegeben werden.
Lassen Sie uns das Ereignisblasen mit Hilfe des folgenden Diagramms verstehen.
Das obige Bild zeigt, dass das Ereignis in dieser Reihenfolge von unten nach oben fließt, wenn ein Benutzer auf die Schaltfläche klickt.
Lassen Sie uns nun das Blubbern des Ereignisses mithilfe von Beispielcode verstehen.
Wie wir sehen können, haben wir einen HTML-Code, in dem wir zwei Schaltflächen Eltern und Kind erstellt haben. Wir haben den parent-Button in <div> und den child-Button in <p> abgelegt.
Im folgenden Code haben wir JavaScript verwendet, und im Skript haben wir ein .addEventListener-Objekt verwendet, um das Bubbling-Ereignis auszuführen.
Wenn wir diesen Code ausführen, werden zwei Ereignisse angezeigt: parent und child. Das Kind-Ereignis ist das innerste Element, und das Eltern-Ereignis ist das äußerste Element.
Beispielcode:
<!DOCTYPE html>
<html>
<head>
<title>
The Bubbling_Event in Javascript
</title>
</head>
<body>
<h2>The Bubbling_Event in Javascript</h2>
<div id="parent">
<button>
<h2>Parent</h2>
</button>
<button id="child">
<p>Child</p>
</button>
</div><br>
<script>
document.getElementById(
"child").addEventListener("click", function () {
alert("YOU CLICKED THE CHILD ELEMENT.");
}, false);
document.getElementById(
"parent").addEventListener("click", function () {
alert("YOU CLICKED THE PARENT ELEMENT.");
}, false);
</script>
</body>
</html>
Die Ausgabe nach dem Ausführen des Codes:
Wenn wir auf die Schaltfläche Eltern klicken, erhalten wir die folgende Ausgabe:
Wenn wir auf die Schaltfläche Kind klicken, erhalten wir die folgende Ausgabe:
Aus dem obigen Beispielcode sehen wir, dass beim Ereignis Bubbling das Ereignis des innersten Elements zuerst ausgelöst wird und dann dem Element des äußersten Ereignisses folgt. Zuerst wird das Element <p> behandelt, dann das Element <div>.
Wir verwenden also das Bubbling-Ereignis, wenn wir das innerste Element in JavaScript behandeln müssen.
Greifen Sie hier auf die Demo des obigen Beispielcodes zu.
Ereigniserfassung in JavaScript
Die Ereigniserfassung wird selten in echtem Code verwendet, kann aber manchmal sehr hilfreich sein. Die Ereigniserfassung ist das Gegenteil des Ereignisblasens; das äußerste Element wird bei der Ereigniserfassung zuerst anvisiert.
In JavaScript verwenden wir die Ereigniserfassung, wenn wir zuerst das Ereignis des äußersten Elements behandeln müssen. Die Ereigniserfassung wird vor dem Ereignis-Bubbling durchgeführt, wird jedoch selten verwendet, da das Ereignis-Bubbling ausreicht, um den Fluss der Ereignisse in JavaScript zu verarbeiten.
Das Flussdiagramm zum Verständnis der Ereigniserfassung ist unten angegeben. Das Bild zeigt, dass das Ereignis in dieser Reihenfolge von oben nach unten fließt, wenn ein Benutzer auf die Schaltfläche klickt.
Lassen Sie uns nun die Ereigniserfassung anhand eines Beispielcodes verstehen.
Wie wir im folgenden Code sehen können, haben wir im Element <div> eine Schaltfläche erstellt. Wir haben auch JavaScript im folgenden HTML-Code verwendet, in dem wir das Objekt .addEventListener verwendet haben, das die Ereigniserfassung durchführt.
Wenn wir diesen Code ausführen und auf die Schaltfläche Click Me klicken, generiert die Konsole die folgende Ausgabe.
Beispielcode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>What is Event Capturing in JavaScript</title>
</head>
<body>
<div class="button-list">
<div class="button-container">
<button class="button"
onClick="console.log('Button!')">
Click Me
</button>
</div>
</div>
<script>
document.addEventListener("click", () =>
console.log('Event Capturing!'), true);
document.addEventListener("click", () =>
console.log('Event Bubbling!'), false);
</script>
</body>
</html>
Die Ausgabe des Codes:
Wie wir anhand der Ereigniserfassung in JavaScript sehen können, werden die Ereignisse in der erwarteten Reihenfolge behandelt.
Greifen Sie hier auf die Demo des obigen Beispielcodes zu.
Der Hauptunterschied zwischen diesen beiden Ereignissen besteht darin, dass das Ereignis Bubbling zuerst die Ereignisse vom innersten zum äußersten verarbeitet und das Ereigniserfassung zuerst das Ereignis des äußersten Elements verarbeitet.
Nachdem Sie diesen Artikel gelesen haben, hoffen wir, Ihnen gezeigt zu haben, wie Event-Bubbling und -Erfassung in JavaScript funktionieren.
My name is Abid Ullah, and I am a software engineer. I love writing articles on programming, and my favorite topics are Python, PHP, JavaScript, and Linux. I tend to provide solutions to people in programming problems through my articles. I believe that I can bring a lot to you with my skills, experience, and qualification in technical writing.
LinkedIn