Evento de cambio de tamaño de la ventana de JavaScript

Evento de cambio de tamaño de la ventana de JavaScript

El "cambiar de tamañoEl evento en JavaScript es un evento incorporado activado cuando el usuario cambia el tamaño de una ventana del navegador. Este evento se puede utilizar para ajustar el diseño o el comportamiento de una página web en respuesta al nuevo tamaño de la ventana. El evento se activa/se dispara en el objeto de la ventana que denota la ventana del navegador.

Esta publicación ilustrará el evento de cambio de tamaño de la ventana en JavaScript.

¿Cuál es el evento de ventana "revolver" en JavaScript??

En JavaScript, el "cambiar de tamañoSe dispara el evento cuando cambia el tamaño de la ventana del navegador. Puede adjuntar una función al evento de cambio de tamaño utilizando el "addEventListener ()Método en el objeto de la ventana. Este evento se activará cuando la ventana del navegador se redimensione.

Sintaxis

La siguiente sintaxis se utiliza para el evento de cambio de tamaño para cambiar el tamaño de la ventana con el método "addEventListener ()":

ventana.addEventListener ('Redize', Funcname)


Se recomienda eliminar al oyente del evento para evitar cualquier filtración de memoria. Para eliminar al oyente del evento, use el "RemoVentListener ()" método:

ventana.remoutEventListener ('RESIZE', FUNCNAME);


Ejemplo

En el ejemplo proporcionado, la longitud y el ancho de la ventana se mostrarán en la página mientras cambia el tamaño de la ventana.

Primero, cree un área de tramo para mostrar la longitud y el ancho de la ventana:

Ancho de la ventana:

Altura de la ventana: id = "altura">


Luego, en la etiqueta, defina una función "Windowresize ()"Donde obtenga la referencia de los elementos de longitud y ancho para imprimir los valores:

WindowResize de funciones ()
documento.getElementById ('altura').inntext = documento.documento.ClientHeight;
documento.getElementById ('ancho').inntext = documento.documento.ClientWidth;


Llama a "cambiar de tamaño"Evento en el"addEventListener ()Método "y adjunte la función definida con el evento:

ventana.addEventListener ('cambiar el tamaño', windowresize);


Llama a "Windowresize ()" por primera vez:

Windowresize ();


La salida indica que el valor se cambia continuamente mientras cambia el tamaño de la ventana:


Eso se trata del evento de cambio de tamaño de la ventana en JavaScript.

Conclusión

El "cambiar de tamaño"El evento en JavaScript se activa cuando se cambia el tamaño de una ventana o un elemento. Puede detectar cambios en el tamaño de la ventana del navegador o en un elemento específico. El evento se puede agregar a una ventana o elemento utilizando el "addEventListener ()"Método y especificando"cambiar de tamaño"Como tipo de evento. En esta publicación, ilustramos el evento de cambio de tamaño de la ventana en JavaScript.