JavaScript 中的 $(window).on('resize')答案

【问题标题】：$(window).on('resize') in JavaScriptJavaScript 中的 $(window).on('resize')
【发布时间】：2016-05-04 00:11:22
【问题描述】：

在 JavaScript 中，是以下代码：

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

同：

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

上面的两个代码块在功能方面是否相等？使用其中一个有什么优势或劣势（无论多么小）？

怎么样：

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

【问题讨论】：

【解决方案1】：

它们不一样，在第一个示例中，您将事件影响到 dom 对象 onresize 处理程序。

jQuery 版本可能在幕后做了一些不同的事情。不查看源代码，它可能只是在做：

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

也就是说，jQuery 版本和原生的addEventListener 仍然不同，因为 jQuery 还为事件处理程序添加了一些魔力。

而addEventListenener 可能是向 DOM 对象添加事件的首选方式，因为您可以添加多个事件，但使用 dom 属性 on[event] 您仅限于一个事件。

在阅读的同时，您还可以阅读有关 addEventListener 朋友的信息：removeEventListener。

【讨论】：

加上jQuery的优势是跨浏览器兼容性的保证。没什么大不了的，如果你只关心最新的浏览器，但对旧的浏览器真的很有用。
@Anton 这可能是可能的，但我已经有几年没有使用 jQuery 写过很多东西了，而且我从来没有感觉好过。必须使用组织良好的框架比使用 jQuery 粘合 dom 修改要好 9000 倍，即使 addEventListener 的编写时间更长，但正确完成的框架甚至可以防止显式创建任何类型的事件侦听器。了解内部结构有助于进一步发展。
感谢 Loïc 和 Anton 的回答。非常感谢。
@Loïc Faure-Lacroix，考虑到 jQuery 之外的任何 JS 框架都超出了这个问题的范围。 GTS Joe 要求比较这三种方法，就是这样。正如我所说，如果您关心较旧的浏览器（例如 IE 8），您会更喜欢 jQuery 方式。例如，IE 8 根本不支持 addEventListener - 它使用 MS 专有的 attachEvent 方法。这就是为什么 jQuery 在过去几年变得如此流行 - 你不必关心浏览器的差异。我非常理解这一点，但我拒绝了长期使用 jQuery。现在使用新浏览器的情况当然要好得多。
那么在这种情况下，如果您需要支持 7 年的浏览器，您仍然受限于 jQuery 1.x（IE9+ 的 jQuery 2.x）。考虑到其他框架并不超出范围，有很多不错的替代方案，有些人可能不知道。

【解决方案2】：

不，它们不一样。你可以试试：

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

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

但是如果你使用

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

只有 function2 响应。

【讨论】：