Detaillierte Erläuterung der drei Phasen des DOM-Ereignisflusses-js-Tutorial-php.cn

Detaillierte Erläuterung der drei Phasen des DOM-Ereignisflusses

青灯夜游

Freigeben： 2019-11-30 17:15:57

nach vorne

5673 Leute haben es durchsucht

Wenn ein Ereignis auftritt, wird es in einer bestimmten Reihenfolge zwischen den Elementknoten verbreitet. Dieser Ausbreitungsprozess ist der DOM-Ereignisstrom.

Detaillierte Erläuterung der drei Phasen des DOM-Ereignisflusses

Der DOM-Ereignisfluss ist in drei Phasen unterteilt, nämlich:

Erfassungsphase: Die Phase, in der Ereignisse von oben nach unten vom Dokumentknoten an den Zielknoten weitergegeben werden;

Zielphase: Die Phase, in der der echte Zielknoten das Ereignis verarbeitet;

Bubbling Stage : Die Phase, in der Ereignisse vom Zielknoten zum Dokumentknoten von oben nach unten weitergegeben werden.

Erfassungsphase:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div>
        <div>son盒子</div>
    </div>
    <script>
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            console.log('son');
        }, true);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            console.log('father');
        }, true);
        document.addEventListener('click', function() {
            console.log('document');
        }, true);
    </script>
</body>

</html>

Nach dem Login kopieren

Die Konsolenausgabe lautet:

Es ist ersichtlich, dass die Ereignisse der Erfassungsphase von oben nach unten vom Dokumentknoten zum Zielknoten weitergegeben werden.

Blubberndes Stadium:

<script>
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            console.log('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            console.log('father');
        }, false);
        document.addEventListener('click', function() {
            console.log('document');
        })
    </script>

Nach dem Login kopieren

Die Konsolenausgabe lautet:

Es ist ersichtlich, dass die Ereignisse der Blasenphase vom Zielknoten von oben nach unten an den Dokumentknoten weitergegeben werden.

Hinweis:

1. JS-Code kann nur eine der Erfassungs- oder Bubbling-Stufen ausführen (entweder Erfassung) bubbling)

2. onclick und attachmentEvent (ie) können nur die Bubbling-Phase erhalten

3 ]) Wenn der dritte Parameter

wahr

ist, bedeutet dies, dass der Ereignishandler in der Ereigniserfassungsphase aufgerufen wird; wenn er falsch ist (schreiben Sie nicht ). Der Standardwert ist false), was bedeutet, dass der Event-Handler während der Event-Bubbling-Phase aufgerufen wird 4. In der tatsächlichen Entwicklung verwenden wir selten Ereignisse Erfassen. Achten Sie mehr auf das Sprudeln von Ereignissen

5 . Ereignisse Das Sprudeln verursacht manchmal Probleme, kann aber gestoppt werden. Die Methode lautet:

stopPropagation()-Methode : Beendigungsereignisse werden während der Erfassungs-, Zielverarbeitungs- oder Bubbling-Phase des Ausbreitungsprozesses weiter verbreitet. Nach dem Aufruf dieser Methode wird der Handler für das Ereignis auf diesem Knoten aufgerufen und das Ereignis wird nicht mehr an andere Knoten gesendet.

Dieser Artikel stammt aus der Spalte

JS-Tutorial, willkommen zum Lernen!

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der drei Phasen des DOM-Ereignisflusses. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!