So verhindern Sie, dass Ereignisse in Javascript sprudeln

Das Blasen von Ereignissen in JavaScript ist ein üblicher Mechanismus zur Ereignisausbreitung. Das bedeutet, dass sich ein Ereignis nach oben ausbreitet (übergeordneter Knoten), bis es den Stammknoten des Dokuments erreicht und breitet sich dann nach außen aus, daher spricht man von Event-Bubbling. Die Implementierung des Event-Bubbling-Mechanismus hat viele Vorteile. Beispielsweise können Event-Handler zum übergeordneten Element anstelle jedes untergeordneten Elements hinzugefügt werden, wodurch die Code-Redundanz verringert und die Wartbarkeit und Wiederverwendbarkeit des Codes verbessert wird. In einigen Fällen müssen wir jedoch möglicherweise verhindern, dass Elementereignisse in die Luft sprudeln, um andere Elemente nicht zu beeinträchtigen. In diesem Artikel werden Möglichkeiten vorgestellt, um zu verhindern, dass Ereignisse in JavaScript sprudeln.

1. Ereigniserfassung und Ereignis-Bubbling

Bevor wir das Ereignis-Bubbling ausführlich besprechen, müssen wir die zwei verschiedenen Phasen der Ereignisausbreitung verstehen: Ereigniserfassung und Ereignis-Bubbling. Die Ereigniserfassung wird vom Stammknoten des Dokuments nach unten zum Zielelement weitergegeben, während die Ereignisblase vom Zielelement nach oben zum Stammknoten des Dokuments weitergegeben wird. Im DOM-Ereignismodell werden Ereignisse zunächst an das äußerste Element des Zielelements übermittelt und dann nach innen weitergegeben, bis ein Ereignis auf dem Zielelement ausgelöst wird. Anschließend wird das Ereignis vom Zielelement nach außen bis zum Zielelement weitergegeben dokumentieren.

2. Methoden zur Verhinderung der Ereignisausbreitung

In JavaScript können wir die Methoden „preventDefault()“ und „stopPropagation()“ verwenden, um die Ausbreitung von Ereignissen zu verhindern. Die Methode Event.preventDefault() wird verwendet, um das Standardverhalten des Ereignisses zu verhindern, beispielsweise das Springen zu einer neuen Seite, wenn auf einen Link geklickt wird. Die Methode stopPropagation() wird verwendet, um die Ausbreitung von Ereignissen zu verhindern und so die Entstehung von Ereignissen oder die Erfassung von Ereignissen zu verhindern. Es kann innerhalb eines Event-Handlers aufgerufen werden, um die Ausbreitung von Event-Bubbling oder Event-Capture zu stoppen.

1. Verwenden Sie die Methode event.stopPropagation()

Diese Methode kann die weitere Ausbreitung eines Ereignisses verhindern und verhindern, dass ein übergeordnetes Element Ereignisse anderer Elemente erfasst. Wenn ein Ereignis ausgelöst wird, wird die weitere Ausbreitung gestoppt und andere Ereignishandler werden nicht aufgerufen.

Der Beispielcode lautet wie folgt:

document.querySelector('#child').addEventListener('click', function(event) {
  console.log('child clicked');
  event.stopPropagation();
})

document.querySelector('#parent').addEventListener('click', function(event) {
  console.log('parent clicked');
})

Wenn in diesem Beispiel auf ein untergeordnetes Element geklickt wird, werden keine Ereignisse mehr übermittelt und der Ereignishandler des übergeordneten Elements wird nicht ausgelöst.

2. Verwenden Sie die Methode event.preventDefault()

Diese Methode verhindert nur das Standardverhalten des Ereignisses, verhindert jedoch nicht, dass das Ereignis sprudelt. Der Beispielcode lautet wie folgt:

document.querySelector('a').addEventListener('click', function(event) {
  console.log('link clicked');
  event.preventDefault();
})

document.querySelector('div').addEventListener('click', function(event) {
  console.log('div clicked');
})

In diesem Beispiel gibt der Ereignishandler beim Klicken auf den Link eine Nachricht aus und verhindert das Springen zu einer neuen Seite. Es wird jedoch weiterhin an den Ereignishandler des übergeordneten Elements (des div-Elements) übergeben.

3. Verhindern Sie das Sprudeln von Ereignissen und das Standardverhalten.

Manchmal müssen wir gleichzeitig das Standardverhalten und den Sprudelnsprozess eines Ereignisses verhindern. In diesem Fall können wir die Methoden „preventDefault()“ und „stopPropagation()“ aufrufen.

Beispielcode lautet wie folgt:

document.querySelector('a').addEventListener('click', function(event) {
  console.log('link clicked');
  event.preventDefault();
  event.stopPropagation();
})

document.querySelector('div').addEventListener('click', function(event) {
  console.log('div clicked');
})

Wenn in diesem Beispiel auf den Link geklickt wird, ruft der Ereignishandler die Methoden „preventDefault()“ und „stopPropagation()“ auf und stoppt so das Standardverhalten des Ereignisses und verhindert, dass es in die Luft sprudelt. Daher wird der Ereignishandler des div-Elements nicht aufgerufen.

3. Zusammenfassung

In diesem Artikel haben wir die Methode zur Verhinderung von Ereignisblasen in JavaScript vorgestellt, d. h. die Verwendung der Methoden stopPropagation() und präventDefault(). Wir haben auch den Unterschied zwischen Event-Bubbling und Event-Capturing behandelt. Wenn wir verhindern müssen, dass das Ereignis sprudelt, können wir die Methode „stopPropagation()“ verwenden, und wenn wir das Standardverhalten des Ereignisses verhindern müssen, können wir die Methode „preventDefault()“ verwenden. In einigen Fällen müssen wir möglicherweise beides verwenden, um das Sprudeln von Ereignissen zu verhindern, und ein Standardverhalten entsprechend unseren Anforderungen verwenden.

Das obige ist der detaillierte Inhalt vonSo verhindern Sie, dass Ereignisse in Javascript sprudeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!