Window : évènement resize
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'évènement resize de l'interface Window se déclenche lorsque la vue du document (fenêtre) a été redimensionnée.
Cet évènement n'est pas annulable et ne se propage pas.
Dans certains navigateurs plus anciens, il était possible d'enregistrer des gestionnaires d'évènements resize sur n'importe quel élément HTML. Il est toujours possible de définir des attributs onresize ou d'utiliser addEventListener() pour définir un gestionnaire sur n'importe quel élément. Cependant, les évènements resize ne sont déclenchés que sur l'objet Window (c'est-à-dire retourné par document.defaultView). Seuls les gestionnaires enregistrés sur l'objet window recevront les évènements resize.
Bien que l'évènement resize ne se déclenche que pour la fenêtre de nos jours, vous pouvez obtenir des notifications de redimensionnement pour d'autres éléments en utilisant l'API ResizeObserver.
Si l'évènement de redimensionnement est déclenché trop souvent pour votre application, consultez optimiser window.onresize (angl.) pour contrôler le temps après lequel l'évènement se déclenche.
Syntaxe
Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènements.
addEventListener("resize", (event) => { })
onresize = (event) => { }
Type d'évènement
Un objet Event générique.
Exemples
Journaliser l'évolution de la taille de la fenêtre
L'exemple suivant affiche la taille de la fenêtre à chaque fois qu'elle est redimensionnée.
HTML
<p>
Redimensionnez la fenêtre pour déclencher l'évènement
<code>resize</code>.
</p>
<p>Hauteur de la fenêtre : <span id="height"></span></p>
<p>Largeur de la fenêtre : <span id="width"></span></p>
JavaScript
const sortieHauteur = document.querySelector("#height");
const sortieLargeur = document.querySelector("#width");
function journaliserTailleFenetre() {
sortieHauteur.textContent = window.innerHeight;
sortieLargeur.textContent = window.innerWidth;
}
window.onresize = journaliserTailleFenetre;
Résultat
Note :
L'exemple ci-dessus est affiché dans un <iframe>, donc les valeurs de largeur et de hauteur rapportées concernent le <iframe>, et non la fenêtre dans laquelle cette page se trouve. En particulier, il sera difficile d'ajuster la taille de la fenêtre pour voir une différence dans la hauteur rapportée.
L'effet est plus facile à voir si vous affichez l'exemple dans sa propre fenêtre.
Équivalent addEventListener
Vous pouvez configurer le gestionnaire d'évènements en utilisant la méthode addEventListener() :
window.addEventListener("resize", journaliserTailleFenetre);
Spécifications
| Spécification |
|---|
| CSSOM View Module # eventdef-window-resize |