Unterschied zwischen event.stopPropagation und event.preventDefault in JavaScript
- Konzept der Ausbreitung
- Phasen der Ausbreitung
-
das
stopPropagation()in JavaScript -
das
preventDefault()in JavaScript
In diesem Artikel lernen wir den Zweck von stopPropagation() und seine Arbeit im JavaScript-Quellcode kennen. Wir werden auch sehen, wie wir ein stopPropagation()-Ereignis verwenden können, um die Weitergabe in JavaScript zu verhindern.
Konzept der Ausbreitung
In der Webentwicklung wird das DOM als Baum betrachtet, der Elemente wie (Eltern, Kind und Geschwister) enthält, die miteinander verwandt sind. Die Weitergabe ist ein Konzept von Ereignissen, die durch den Document Object Model (DOM)-Baum wandern.
Um die Ausbreitung besser zu verstehen, verwenden wir als Beispiel eine elektrische Leitung, bei der ein Stromfluss in einer Leitung verläuft, bis er sein definiertes Ziel erreicht. Ereignisse werden durch jeden Knoten im DOM geleitet, bis es den letzten Knoten erreicht.
Phasen der Ausbreitung
Event Bubbling und Capturing sind die Phasen der Ausbreitung. In einfachen Worten, Bubbling wandert vom Zielknoten zur Wurzel, und Capturing wandert umgekehrt zu Bubbling; es wandert vom Wurzelknoten zum Ziel.
Der DOM-Knoten, der verwendet wird, um ein Ereignis wie das Klicken auf eine Schaltfläche auszulösen, wird als Ziel bezeichnet, und eine Schaltfläche mit einem Klickereignis ist ein Ereignisziel.
das stopPropagation() in JavaScript
Wenn wir im Standard-Propagationsverhalten auf eine Schaltfläche klicken, löst dies jeden einzelnen Ereignishandler auf dem Weg aus, der demselben Typ zugeordnet ist. Diese Art von Verhalten ist nicht machbar und führt zu Leistungsproblemen.
Um dieses Ausbreitungsverhalten durch den DOM-Baum zu verhindern, verwenden wir das Ereignis stopPropagation(). Mit diesem Ereignis können wir den einzigen Ereignishandler ausführen, von dem es ausgelöst wurde.
Grundlegende Syntax:
event.stopPropagation()
Die Methode stopPropagation() wird verwendet, um zu verhindern, dass das Propagierungsverhalten des gleichen Ereignisses aufgerufen wird.
Beispielcode:
<!DOCTYPE html>
<html>
<body>
<style>
.myDiv {
border: 2px outset black;
padding: 30px;
text-align: center;
}
</style>
<h1 style="color:blueviolet">DelftStack Learning</h1>
<h3>JavaScript stop propagation event</h3>
<p>Click on CHILD DIV</p>
<div class="myDiv" onclick="parentFunction()">
PARENT DIV
<div class="myDiv" onclick="childFunction(event)">CHILD DIV</div>
</div>
Prevent Propagation:
<input type="checkbox" id="check">
<script>
function childFunction(event) {
console.log("Child div event executed ..");
if (document.getElementById("check").checked) {
event.stopPropagation(); // preventing propagation
}
}
function parentFunction() {
console.log("Parent div event executed ..");
}
</script>
</body>
</html>
Ausgabe mit Ausbreitung:
Ausgabe ohne Ausbreitung:
In der obigen HTML-Quelle haben wir das untergeordnete Div innerhalb des übergeordneten Div erstellt und beim onClick-Ereignis dieses div separate Funktionen aufgerufen.
In den <script>-Tags haben wir parentfunction() und childFunction() deklariert, in denen wir das ausgeführte Ereignis in Protokollen angezeigt haben. In childFunction() haben wir event als Argument übergeben und dieses Ereignis verwendet, um die Weitergabe zu stoppen.
Wir haben ein Checkbox-Element erstellt, um den aktuellen Status von einem Benutzer zu erhalten, ob er die Weitergabe verhindern möchte oder nicht. In childFunction() verwenden wir eine bedingte Anweisung, um herauszufinden, ob das Kontrollkästchen aktiviert ist oder nicht.
Wenn es aktiviert ist, haben wir einfach event.stopPropagation(); aufgerufen. Ausbreitung zu verhindern. Wenn der Benutzer auf das CHILD DIV zusammen mit der Checkbox-Auswahl klickt, wird nur childFunction() ausgeführt; Andernfalls werden beide Funktionen ausgeführt.
Speichern Sie die obige Quelle mit der HTML-Erweiterung und öffnen Sie sie in einem Browser. Öffnen Sie den Debugger-Modus zusammen mit der Konsolenregisterkarte, um die Ergebnisse anzuzeigen.
das preventDefault() in JavaScript
Die Methode event.stopPropagation() ist nicht sinnvoll, um Standardverhalten von HTML-Elementen wie Link-Klick oder Checkbox zu stoppen. Um dies zu erreichen, können wir event.preventDefault() verwenden.
Es verhindert die Standardaktion, die der Browser bei diesem Ereignis durchführt. Wenn wir also die Methode preventDefault() verwenden, dann wird nur die Standardaktion des Browsers verhindert, aber der Click-Handler unseres div wird immer noch ausgelöst.
Beispielcode:
function childFunction(event) {
console.log('Child div event executed ..');
if (document.getElementById('check').checked) {
event.preventDefault(); // preventing default action
}
}
In der obigen JavaScript-Funktion childFunction() haben wir gerade event.stopPropagation() durch event.preventDefault() ersetzt, um den Verhaltensunterschied in Protokollen zu sehen.