Warum löst dasselbe Ereignis zweimal Blasen aus?-js-Tutorial-php.cn

Warum löst dasselbe Ereignis zweimal Blasen aus?

WBOY

Freigeben： 2024-02-19 22:34:07

Original

787 Leute haben es durchsucht

Warum löst dasselbe Ereignis zweimal Blasen aus?

Warum passiert das gleiche Sprudelereignis zweimal?

Event-Bubbling ist ein gängiger Mechanismus zur Ereignisübermittlung in Browsern. Wenn ein Element ein Ereignis auslöst, wird das Ereignis vom ausgelösten Element der Reihe nach an die oberen Elemente weitergegeben, bis es an das Stammelement des Dokuments weitergegeben wird. Dieser Vorgang ähnelt dem Sprudeln von Blasen im Wasser und wird daher als Ereignissprudeln bezeichnet.

Aber manchmal kommt es vor, dass das gleiche Blasenereignis zweimal auftritt. Es gibt zwei Hauptgründe: Veranstaltungsregistrierung und Veranstaltungsabwicklung.

Zunächst müssen wir klarstellen, dass sich die Event-Registrierung auf die Bindung eines Events an ein Element bezieht. In der allgemeinen Webentwicklung verwenden wir normalerweise die Methode addEventListener(), um Ereignis-Listener zu Elementen hinzuzufügen. Wenn wir diese Methode verwenden, um Ereignis-Listener zu Elementen hinzuzufügen, kommt es manchmal zu Duplikaten. Zum Beispiel:

var element = document.getElementById('myElement');
element.addEventListener('click', function() {
    console.log('事件冒泡');
});

Nach dem Login kopieren

Im obigen Code haben wir einen Klickereignis-Listener zu einem Element namens „myElement“ hinzugefügt. Wenn wir jedoch die Methode addEventListener() im Code mehrmals aufrufen und denselben Ereignis-Listenertyp demselben Element hinzufügen, wird bei jedem Aufruf ein neuer Listener hinzugefügt, wodurch dasselbe Ereignis mehrmals auftritt.

Zweitens bezieht sich die Ereignisbehandlung auf den Code, der ausgeführt wird, nachdem das Ereignis ausgelöst wurde. Wenn während der Ereignisübermittlung ein Ereignis von einem untergeordneten Element an ein übergeordnetes Element übergeben wird, wird der entsprechende Ereignishandler für das übergeordnete Element ausgelöst. Manchmal lösen wir jedoch versehentlich denselben Ereignistyp für ein untergeordnetes Element erneut im Ereignishandler des übergeordneten Elements aus, wodurch dasselbe Ereignis zweimal auftritt.

Das folgende Codebeispiel veranschaulicht die beiden oben genannten Situationen:

<!DOCTYPE html>
<html>
<head>
    <title>事件冒泡</title>
</head>
<body>
    <div id="parentElement">
        <div id="childElement">点击我</div>
    </div>

    <script>
        var parentElement = document.getElementById('parentElement');
        var childElement = document.getElementById('childElement');

        parentElement.addEventListener('click', function() {
            console.log('父元素的事件处理程序');
            childElement.click(); // 在父元素的事件处理程序中再次触发子元素的click事件
        });

        childElement.addEventListener('click', function() {
            console.log('子元素的事件处理程序');
        });
    </script>
</body>
</html>

Nach dem Login kopieren

Im obigen Code haben wir Klickereignis-Listener zum übergeordneten Element bzw. zum untergeordneten Element hinzugefügt „Ereignishandler des untergeordneten Elements“ und löst das Klickereignis des untergeordneten Elements aus, wodurch das Klickereignis des untergeordneten Elements erneut ausgelöst wird und „der Ereignishandler des untergeordneten Elements“ ausgegeben wird. Auf diese Weise kommt es zweimal zu demselben Ereignis.

Um zu vermeiden, dass Ereignisblasen zweimal auftreten, können wir im Ereignishandler des übergeordneten Elements eine Beurteilungsbedingung hinzufügen und das entsprechende Ereignis des untergeordneten Elements nur dann auslösen, wenn die Bedingung erfüllt ist, um so wiederholte Blasenbildung zu vermeiden.

Zusammenfassend lässt sich sagen, dass der Grund dafür, dass dieselbe Veranstaltung zweimal sprudelt, hauptsächlich in wiederholten Vorgängen bei der Veranstaltungsregistrierung und der Veranstaltungsabwicklung liegt. Wir können wiederholtes Sprudeln vermeiden, indem wir die Ereignisregistrierung optimieren und bedingte Beurteilungen hinzufügen.

Das obige ist der detaillierte Inhalt vonWarum löst dasselbe Ereignis zweimal Blasen aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!