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

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.

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

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

window.
onload
 = function() {}或者 window.addEventListener('
load
', function() {});

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(
'DOMContentLoaded'
, function() { })

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(){});

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.

3f1c4e4b6b16bbbd69b2ee476dc4f83a
      window,addEventListener('resize',function(){
          console.log(window.innerWidth);
      })
     2cacc6d41bbb37262a98f745aa00fbf0

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é ;

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
    93f0f5c25f18dab9d176bd4f6de5d30e
        a80eb7cbb6fff8b0ff70bae37074b813
        b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
        46d5fe1c7617e3914f214aaf043f4ccf

        531ac245ce3e4fe3d50054a55f265927
        8019067d09615e43c7904885b5246f0a

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

        window.addEventListener('load', function() {
 
            alert(22);
        })

        document.addEventListener('DOMContentLoaded', function() {
                alert(33);
            })
    
        2cacc6d41bbb37262a98f745aa00fbf0
    9c3bca370b5104690d9ef395f2c5f8d1
    6c04bd5ca3fcae76e30b72ad730ca86d    
        a5d9cc459240d83bcb5c71b35fa6d7f1请点击65281c5ac262bf6d81768915a4a77ac0
        
    36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

É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é ;

C'est la première fois que je vois cela ; cela semble correct

【Recommandations associées :

tutoriel vidéo javascript

,

front-end web

】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!