JavaScript中的$（window）.on（＆＃39; resize＆＃39;）

Question

在JavaScript中，是以下代码：

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

与：

相同

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

两个代码块在功能方面是否相同？使用其中一种是否有任何优点或缺点（无论多么微小）？

怎么样：

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

Answer 1

它们不一样，在第一个示例中，您正在影响dom对象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。

Answer 2

不，他们不一样。你可以尝试：

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

并且当窗口调整大小时，function1和function2都会响应。

但是如果你使用

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

只有function2响应。