Événement de redimension de la fenêtre JavaScript

Le "redimensionner»L'événement dans JavaScript est un événement intégré déclenché lorsque l'utilisateur modifie la taille d'une fenêtre de navigateur. Cet événement peut être utilisé pour ajuster la disposition ou le comportement d'une page Web en réponse à la nouvelle taille de fenêtre. L'événement est déclenché / tiré sur l'objet de fenêtre qui désigne la fenêtre du navigateur.

Cet article illustrera l'événement de redimensionnement de la fenêtre en javascript.

Quel est l'événement de la fenêtre «redimensionner» en javascript?

En JavaScript, le «redimensionner»L'événement est licencié lorsque la taille de la fenêtre du navigateur change. Vous pouvez attacher une fonction à l'événement de redimensionnement en utilisant le «addEventListener ()”Méthode sur l'objet de fenêtre. Cet événement se déclenche chaque fois que la fenêtre du navigateur est redimensionnée.

Syntaxe

La syntaxe suivante est utilisée pour l'événement de redimensionnement pour redimensionner la fenêtre avec la méthode "AddeventListener ()":

fenêtre.AddeventListener («redimensi», funcname)

Il est recommandé de supprimer l'écouteur d'événements pour éviter toute fuite de mémoire. Pour retirer l'auditeur d'événements, utilisez le «retireEventListener ()" méthode:

fenêtre.retireEventListener («redimensi», funcname);

Exemple

Dans l'exemple fourni, la longueur et la largeur de la fenêtre s'affichent sur la page lors de la redimensionnement de la fenêtre.

Tout d'abord, créez une zone de portée pour afficher la longueur et la largeur de la fenêtre:

Largeur de la fenêtre:

Hauteur de la fenêtre: id = "hauteur">

Ensuite, dans TAG, définissez une fonction "windowResize ()”Où obtenir la référence de la longueur et des éléments de largeur pour imprimer les valeurs:

fonction windowResize ()
document.GetElementByid («hauteur»).InnerText = Document.document de document.ClientHeight;
document.GetElementByid («largeur»).InnerText = Document.document de document.ClientWidth;

Appeler le "redimensionner”Événement dans le"addEventListener ()”Méthode et attachez la fonction définie avec l'événement:

fenêtre.addEventListener («redimensi», windowResize);

Appeler le "windowResize ()" pour la première fois:

windowResize ();

La sortie indique que la valeur est modifiée en continu tout en modifiant la taille de la fenêtre:

Il s'agit de l'événement de redimensionnement de la fenêtre en javascript.

Conclusion

Le "redimensionner»L'événement en JavaScript est déclenché lorsque la taille d'une fenêtre ou d'un élément est modifiée. Il peut détecter les modifications de la taille de la fenêtre du navigateur ou un élément spécifique. L'événement peut être ajouté à une fenêtre ou à une élément à l'aide du «addEventListener ()"Méthode et spécifiant"redimensionner"Comme type d'événement. Dans cet article, nous avons illustré l'événement de redimensionnement de la fenêtre en javascript.