Detaillierte Erläuterung der JavaScript-BOM-Zusammensetzung und häufiger Ereignisse

1. Stückliste

1. Was ist BOM?

BOM (Browser Object Model) ist ein Browserobjektmodell, das Objekte bereitstellt, die unabhängig vom Inhalt mit dem Browserfenster interagieren. Sein Kernobjekt ist das Fenster.

Die Stückliste besteht aus einer Reihe verwandter Objekte und jedes Objekt bietet viele Methoden und Eigenschaften.

BOM hat keine Standards. Die Standardisierungsorganisation für JavaScript-Syntax ist ECMA, und die Standardisierungsorganisation für DOM ist W3C. BOM war ursprünglich Teil des Netscape-Browserstandards.

2. Zusammensetzung der Stückliste

Wie in der folgenden Abbildung dargestellt:

Das Fensterobjekt ist das Objekt der obersten Ebene des Browsers und hat eine Doppelrolle.

Es ist eine Schnittstelle für JS, um auf das Browserfenster zuzugreifen. Ein weiteres globales Objekt. Im globalen Bereich definierte Variablen und Funktionen werden zu Eigenschaften und Methoden des Fensterobjekts.

Beim Aufruf kann das Fenster weggelassen werden. alert(), prompt() usw. sind alles Methoden des Fensterobjekts.

Wir können das Fensterobjekt aufrufen, um zu sehen, welche Eigenschaften und Methoden es hat.

Wie unten dargestellt:

konsole.log(Fenster);

Der abgefangene Teil lautet wie folgt:

Es ist ersichtlich, dass die im globalen Bereich definierten Variablen und Funktionen zu Eigenschaften und Methoden des Fensterobjekts werden.

2. Allgemeine Ereignisse von Fensterobjekten

1. Fensterladeereignis

Wir wissen, dass im Ausführungsmechanismus von JavaScript die Codeausführung der Reihe nach von oben nach unten erfolgt. Wenn wir also einer Schaltfläche ein Klickereignis hinzufügen möchten, können wir zuerst die Schaltfläche festlegen und sie dann wie folgt zum Ausführen bringen:

<Text>
    <button>Klick</button>
    <Skript>
        var btn = document.querySelector('Schaltfläche');
        btn.onclick = Funktion(){
            alert('Sie haben gerade geklickt!')
        }
    </Skript>
</body>

Klicken Sie auf den Effekt:

Wenn wir das gebundene Klickereignis vorne auf der Seite platzieren möchten, ist dies offensichtlich nicht möglich. Was sollen wir dann tun? Zu diesem Zeitpunkt können wir es durch unser Fensterladeereignis abschließen.

window.onload ist das Fenster- (Seiten-)Ladeereignis. Dieses Ereignis wird ausgelöst, wenn der Dokumentinhalt vollständig geladen ist (einschließlich Bilder, Skriptdateien, CSS-Dateien usw.) und die Verarbeitungsfunktion aufgerufen wird.

fenster.onload = function(){}
//oder window.addEventListener("load",function(){});

Wie im obigen Beispiel:

<Text>
    <Skript>
        fenster.onload = funktion(){
            var btn = document.querySelector('Schaltfläche');
        btn.onclick = Funktion(){
            alert('Sie haben gerade geklickt!')
        }
        }
    </Skript>
    <button>Klick</button>
</body>

Auch der Klickeffekt kann hierbei erzielt werden.

Es ist zu beachten, dass:

1. Mit window.onload können Sie JS-Code über den Seitenelementen schreiben, da onload die Verarbeitungsfunktion ausführt, nachdem alle Seiteninhalte geladen wurden.

2. Die herkömmliche Methode zur Registrierung von window.onload -Ereignissen kann nur einmal geschrieben werden. Wenn mehrere window.onload-Ereignisse vorhanden sind, wird das letzte verwendet.

3. Wenn Sie addEventListener verwenden, gibt es keine Einschränkung.

Was wäre, wenn wir zu diesem Zeitpunkt auch ein Klickereignis hätten und dessen Vorgang vor das Element setzen möchten?

Versuchen wir es:

 <Skript>
        fenster.onload = funktion(){
            var btn = document.querySelector('Schaltfläche');
        btn.onclick = Funktion(){
            alert('Sie haben erneut geklickt!')
        }
    }
        fenster.onload = funktion(){
           alert('Hallo')
        }
    </Skript>
    <button>Klick</button>
</body>

Wie ist das Druckergebnis?

Es stellt sich heraus, dass das erste Ereignis durch das zweite Ereignis überschrieben wird. Dies können wir anders handhaben, und zwar wie folgt:

document.addEventListener('DOMContentLoaded',Funktion(){})

Der Code lautet:

 <Skript>
        document.addEventListener('DOMContentLoaded',Funktion(){
            var btn = document.querySelector('Schaltfläche');
            btn.onclick = Funktion(){
                alert('Sie haben erneut geklickt!')
            }
            alert('Hallo')
        })
    </Skript>
    <button>Klick</button>
</body>

Die laufenden Ergebnisse sind:

Das Ereignis DOMContentLoaded wird nur ausgelöst, wenn das DOM geladen wird, ausgenommen Stylesheets, Bilder, Flash usw. Diese Methode wird nur von Internet Explorer 9 und höher unterstützt. Wenn die Seite viele Bilder enthält, kann es vom Benutzerzugriff bis zum Auslösen von Onload lange dauern, und der interaktive Effekt kann nicht erzielt werden, was sich zwangsläufig auf die Benutzererfahrung auswirkt. Zu diesem Zeitpunkt ist es besser geeignet, das Ereignis DOMContentLoaded zu verwenden.

2. Fenstergröße anpassen

Auf vielen Websites werden wir feststellen, dass sich der Inhalt entsprechend ändert, wenn wir die Fenstergröße ändern. Wie wird das gemacht? Hier verwenden wir unser Fenstergrößenänderungsereignis.

Das Format ist:

//(1)
Fenster.onresize = function(){}
//(2)
window.addEventListener("Größe ändern",function(){});

window.onresize ist ein Ladeereignis zur Größenänderung eines Fensters. Die Verarbeitungsfunktion wird aufgerufen, wenn es ausgelöst wird.

Zum Beispiel:

Auf der Seite befindet sich ein Feld. Wenn die Breite unserer Seite weniger als 800 Pixel beträgt, wird die Farbe dieses Felds violett.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        div {
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: rot;
        }
    </Stil>
</Kopf>
<Text>
    <div></div>
   <Skript>
       div = Dokument.Abfrageselektor('div')
       Fenster.onresize = Funktion(){
           Konsole.log(Fenster.innereBreite);
           wenn(window.innerWidth <= 800){
               div.style.backgroundColor = "grün";
           }
       }
   </Skript>
</body>
</html>

Das Druckergebnis ist:

In ähnlicher Weise können wir die obigen Vorgänge auch über window.addEventListener("resize",function(){}) ausführen, was hier nicht wiederholt wird.

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!