Événement de chargement de la page de la fenêtre d'analyse de l'instance JavaScript-js tutoriel-php.cn

Événement de chargement de la page de la fenêtre d'analyse de l'instance JavaScript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Libérer： 2022-08-05 09:24:08

avant

2733 Les gens l'ont consulté

Cet article vous apporte des connaissances pertinentes sur javascript, qui introduit principalement les événements de fenêtre. window.onload est un événement de chargement de fenêtre (page). Cet événement sera déclenché lorsque le contenu du document est complètement chargé. J'espère que cela sera utile à tout le monde.

Événement de chargement de la page de la fenêtre d'analyse de l'instance JavaScript

[Recommandations associées : tutoriel vidéo javascript, front-end web]

Événement de chargement de page de fenêtre

window.
onload
 = function() {}或者 window.addEventListener(&#39;
load
&#39;, function() {});

Copier après la connexion

window.onload est un événement de chargement de fenêtre (page), lorsque le document le contenu est complètement chargé Ce n'est qu'alors que l'événement sera déclenché (y compris les images, les fichiers de script, les fichiers CSS, etc.).

Remarque :

Avec window.onload, vous pouvez écrire le code js au-dessus de l'élément de page, car onload attend que tout le contenu de la page soit chargé avant d'exécuter la fonction de traitement
; Window.onload ne peut être écrit qu'une seule fois dans la méthode d'enregistrement traditionnelle. S'il y en a plusieurs, le dernier window.onload prévaudra.
Il n'y a pas de limite lors de l'utilisation de window.addEventListener('load', function() { }).

document.addEventListener(
&#39;DOMContentLoaded&#39;
, function() { })

Copier après la connexion

Lorsque l'événement DOMContentLoaded est déclenché, uniquement lorsque le DOM est chargé, hors feuilles de style, images, flash, etc.

S'il y a beaucoup d'images sur la page, cela peut prendre beaucoup de temps entre l'accès de l'utilisateur et le déclenchement du chargement, et l'effet interactif ne peut pas être obtenu, ce qui affectera inévitablement l'expérience utilisateur. Dans ce cas, il est plus approprié d'utiliser. DOMContentLoaded.

L'événement de redimensionnement de la fenêtre

window.onresize = funtion(){}
window.addEventListener("resize",funtion(){});

Copier après la connexion

window.onresize est l'événement de chargement du redimensionnement de la fenêtre. C'est une fonction de traitement qui est déclenchée et appelée chaque fois que la taille de la fenêtre change en pixels. Cet événement est souvent utilisé pour compléter une mise en page réactive.

window.innerWidth La largeur de l'écran actuel.

<script>
      window,addEventListener(&#39;resize&#39;,function(){
          console.log(window.innerWidth);
      })
     </script>

Copier après la connexion

ajouté :

pageshow event, cet événement est déclenché lorsque la page est affichée, que la page provienne ou non du cache. Dans la page rechargée, pageshow sera déclenché après le déclenchement de l'événement de chargement

Selon la persistance dans l'objet événement, il est déterminé si l'événement pageshow est déclenché par la page dans le cache.

Les exemples sont les suivants :

window.onload est un événement de chargement de fenêtre (page) Lorsque le contenu du document est complètement chargé, cet événement sera déclenché (y compris les images, les fichiers de script, les fichiers CSS, etc. ), et la fonction de traitement sera appelée ;

Avec window.onload, vous pouvez écrire du code JS au-dessus des éléments de la page, car onload attend que tout le contenu de la page soit chargé avant d'exécuter la fonction de traitement ; la méthode d'événement d'enregistrement traditionnelle ne peut être écrite qu'une seule fois. S'il y en a plusieurs, le dernier window.onload prévaudra

Si vous utilisez addEventListener, il n'y a pas de limite

Lorsque l'événement DOMContentLoaded est déclenché, uniquement lorsque le DOM est déclenché ; chargé, à l'exclusion des feuilles de style, des images, du flash, etc. ;

le9 Seuls les éléments ci-dessus sont pris en charge

S'il y a beaucoup d'images sur la page, cela peut prendre beaucoup de temps entre l'accès de l'utilisateur et le déclenchement de l'événement chargé par DOMContentl. être utilisé ;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">

        </style>
        <script type="text/javascript">

        window.addEventListener(&#39;load&#39;, function() {
            var btn = document.querySelector(&#39;button&#39;);
            btn.addEventListener(&#39;click&#39;, function() {
                alert(&#39;点击我&#39;);
            })
        })

        window.addEventListener(&#39;load&#39;, function() {
 
            alert(22);
        })

        document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
                alert(33);
            })
    
        </script>
    </head>
    <body>    
        <button id = "btn1" >请点击</button>
        
    </body>
</html>

Copier après la connexion

État de l'opération ;

Ceci apparaît en premier ; c'est la fenêtre contextuelle une fois le chargement du DOM terminé

Ensuite, ceci

Cliquez sur le bouton pour lire ceci ; un événement de chargement enregistré avec addEventListener ;

La méthode DOM querySelector() ne nécessite pas de support supplémentaire tel que jQuery. Vous pouvez également obtenir facilement des éléments DOM, la syntaxe est similaire à celle de jQuery ; premier élément qui correspond au sélecteur spécifié ;