Evento de cambio de tamaño de ventana de JavaScript

¿Cómo puedo conectarme a un evento de cambio de tamaño de ventana del navegador?

Existe una forma jQuery de escuchar eventos de cambio de tamaño , pero preferiría no incluirla en mi proyecto solo por este requisito.

Mar 13 '09 15:03 Dead account

La mejor práctica es agregar al evento de cambio de tamaño, en lugar de reemplazarlo:

window.addEventListener('resize', function(event) {
    ...
}, true);

Una alternativa es crear un único controlador para el evento DOM (pero solo puede tener uno), por ejemplo.

window.onresize = function(event) {
    ...
};

jQuery puede trabajar un poco para garantizar que el evento de cambio de tamaño se active de manera consistente en todos los navegadores, pero no estoy seguro de si alguno de los navegadores difiere, pero le recomiendo que lo pruebe en Firefox, Safari e IE.

Mar 13 '2009 08:03 olliej

En primer lugar, sé que el addEventListenermétodo se mencionó en los comentarios anteriores, pero no vi ningún código. Dado que es el enfoque preferido, aquí está:

window.addEventListener('resize', function(event){
  // do stuff here
});

Aquí hay una muestra funcional .

Aug 29 '2013 20:08 Jondlm

Nunca anule la función window.onresize.

En su lugar, cree una función para agregar un detector de eventos al objeto o elemento. Esto verifica y, en caso de que los oyentes no funcionen, anula la función del objeto como último recurso. Este es el método preferido utilizado en bibliotecas como jQuery.

object: el elemento u objeto de la ventana
type: cambiar el tamaño, desplazarse (tipo de evento)
callback: la referencia de la función

var addEvent = function(object, type, callback) {
    if (object == null || typeof(object) == 'undefined') return;
    if (object.addEventListener) {
        object.addEventListener(type, callback, false);
    } else if (object.attachEvent) {
        object.attachEvent("on" + type, callback);
    } else {
        object["on"+type] = callback;
    }
};

Entonces el uso es así:

addEvent(window, "resize", function_reference);

o con una función anónima:

addEvent(window, "resize", function(event) {
  console.log('resized');
});

Jun 30 '2010 14:06 Alex V

El evento de cambio de tamaño nunca debe usarse directamente, ya que se activa continuamente a medida que cambiamos el tamaño.

Utilice una función antirrebote para mitigar el exceso de llamadas.

window.addEventListener('resize',debounce(handler, delay, immediate),false);

Aquí hay un rebote común flotando en la red, aunque busque otros más avanzados como los que aparecen en lodash.

const debounce = (func, wait, immediate) => {
    var timeout;
    return () => {
        const context = this, args = arguments;
        const later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        const callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

Esto se puede usar así...

window.addEventListener('resize', debounce(() => console.log('hello'),
200, false), false);

Nunca disparará más de una vez cada 200 ms.

Para cambios de orientación móvil utilice:

window.addEventListener('orientationchange', () => console.log('hello'), false);

Aquí hay una pequeña biblioteca que armé para encargarme de esto de manera ordenada.

Apr 06 '2017 03:04 frontsideup

Creo que @Alex V ya proporcionó la respuesta correcta, sin embargo, la respuesta requiere cierta modernización, ya que ya tiene más de cinco años.

Hay dos cuestiones principales:

Nunca lo use objectcomo nombre de parámetro. Es una palabra reservada. Dicho esto, la función proporcionada por @Alex V no funcionará en strict mode.
La addEventfunción proporcionada por @Alex V no devuelve event objectsi addEventListenerse utiliza el método. Se debe agregar otro parámetro a la addEventfunción para permitir esto.

NOTA: El nuevo parámetro se addEventha hecho opcional para que la migración a esta nueva versión de función no interrumpa ninguna llamada anterior a esta función. Se admitirán todos los usos heredados.

Aquí está la función actualizada addEventcon estos cambios:

/*
    function: addEvent

    @param: obj         (Object)(Required)

        -   The object which you wish
            to attach your event to.

    @param: type        (String)(Required)

        -   The type of event you
            wish to establish.

    @param: callback    (Function)(Required)

        -   The method you wish
            to be called by your
            event listener.

    @param: eventReturn (Boolean)(Optional)

        -   Whether you want the
            event object returned
            to your callback method.
*/
var addEvent = function(obj, type, callback, eventReturn)
{
    if(obj == null || typeof obj === 'undefined')
        return;

    if(obj.addEventListener)
        obj.addEventListener(type, callback, eventReturn ? true : false);
    else if(obj.attachEvent)
        obj.attachEvent("on" + type, callback);
    else
        obj["on" + type] = callback;
};

Un ejemplo de llamada a la nueva addEventfunción:

var watch = function(evt)
{
    /*
        Older browser versions may return evt.srcElement
        Newer browser versions should return evt.currentTarget
    */
    var dimensions = {
        height: (evt.srcElement || evt.currentTarget).innerHeight,
        width: (evt.srcElement || evt.currentTarget).innerWidth
    };
};

addEvent(window, 'resize', watch, true);

Oct 05 '2015 18:10 WebWanderer