$(window).on('resize') в JavaScript

В JavaScript есть следующий код:

window.onresize = function() {
    // Do something.
}

То же, что:

$(window).on('resize', function () {
    // Do something.
});

Являются ли два кодовых блока выше равных, функционально? Есть ли какие-либо преимущества или недостатки (хотя и незначительные) с использованием одного или другого?

Как насчет:

window.addEventListener('resize', function(event) {
    // Do something.
});

Ответ 1

Они не совпадают, в первом примере вы воздействуете на событие на обработчик dom object onresize.

Версия jQuery, вероятно, делает что-то другое за сценой. Не смотря на исходный код, он, вероятно, просто делает:

window.addEventListener('resize', function () {...})

Тем не менее, версия jQuery и родной addEventListener все еще отличаются, потому что jQuery также добавляет некоторую магию обработчику событий.

И addEventListenener, вероятно, предпочтительный способ добавить событие к объекту DOM, потому что вы можете добавить несколько событий, но с атрибутом dom on[event] вы ограничены одним событием.

Вот несколько подробнее об этом: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Пока вы на нем, вы также можете прочитать о друге addEventListener: removeEventListener.

Ответ 2

Нет, они не одинаковы. Вы можете попробовать:

  $(window).on('resize',function1);
  $(window).on('resize',function2);

а функции1 и функция2 отвечают при изменении размера окна.

Но если вы используете

 window.onresize = function1;
 window.onresize = function2;

Ответьте только на функцию2.