Evento di ridimensionare la finestra JavaScript

IL "ridimensionare"L'evento in JavaScript è un evento integrato attivato quando l'utente cambia la dimensione di una finestra del browser. Questo evento può essere utilizzato per regolare il layout o il comportamento di una pagina Web in risposta alla nuova dimensione della finestra. L'evento viene attivato/sparato sull'oggetto della finestra che indica la finestra del browser.

Questo post illustrerà l'evento di ridimensionamento della finestra in JavaScript.

Qual è l'evento "ridimensiona" della finestra in JavaScript?

In JavaScript, il "ridimensionare"L'evento viene licenziato quando la dimensione della finestra del browser cambia. È possibile allegare una funzione all'evento di ridimensionamento utilizzando il "addEventListener ()"Metodo sull'oggetto della finestra. Questo evento attiverà ogni volta che la finestra del browser viene ridimensionata.

Sintassi

La seguente sintassi viene utilizzata per l'evento di ridimensionamento per ridimensionare la finestra con il metodo "AddeventListener ()":

finestra.addEventListener ('Riassie', FuncName)

Si consiglia di rimuovere l'ascoltatore di eventi per evitare eventuali perdite di memoria. Per la rimozione dell'ascoltatore di eventi, usa il “Rimodomina eventListener ()" metodo:

finestra.RimuoviEventListener ('Riassie', FuncName);

Esempio

Nell'esempio fornito, la lunghezza e la larghezza della finestra verranno visualizzate sulla pagina mentre si ridimensiona la finestra.

Innanzitutto, crea un'area di span per visualizzare la lunghezza e la larghezza della finestra:

Larghezza della finestra:

Altezza della finestra: id = "altezza">

Quindi, in tag, definire una funzione "WindowsResize ()"Dove ottenere il riferimento degli elementi di lunghezza e larghezza per stampare i valori:

Funzione WindowResize ()
documento.getElementById ('altezza').InnerText = Document.DocumentElement.ClientHeight;
documento.getElementById ('larghezza').InnerText = Document.DocumentElement.ClientWidth;

Chiama il "ridimensionareEvento "nel"addEventListener ()"Metodo e allega la funzione definita con l'evento:

finestra.addEventListener ('Ridimensize', WindowResize);

Chiama il "WindowsResize ()" per la prima volta:

finestraresize ();

L'output indica che il valore viene continuamente modificato durante la modifica della dimensione della finestra:

Riguarda l'evento di ridimensionamento della finestra in JavaScript.

Conclusione

IL "ridimensionare"L'evento in JavaScript viene attivato quando viene modificata la dimensione di una finestra o un elemento. Può rilevare le modifiche alla dimensione della finestra del browser o di un elemento specifico. L'evento può essere aggiunto a una finestra o elemento usando "addEventListener ()"Metodo e specificando"ridimensionare"Come tipo di evento. In questo post, abbiamo illustrato l'evento di ridimensionamento della finestra in JavaScript.