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

Question

在JavaScript中，以下代码是：

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

同样的意思：

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

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

还有：

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

- GTS Joe

---

window.onresize 是 DOM，$(window).on 是 jQuery。两者不同但效果相同。 - progrAmmar

Answer 1

它们并不相同，在第一个示例中，您将事件分配给DOM对象onresize处理程序。

jQuery版本可能在幕后执行了不同的操作。如果没有查看源代码，则可能只是执行以下操作：

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

尽管如此，jQuery版本和本机addEventListener仍然不同，因为jQuery也在事件处理程序中添加了一些特殊功能。

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

这里有更多关于它的信息：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

当您在操作时，还可以了解addEventListener的伙伴：removeEventListener。

- Loïc Faure-Lacroix

---

jQuery的优点之一是保证跨浏览器兼容性。如果你只关心最新的浏览器，这并不是什么大问题，但对于旧版本的浏览器来说确实非常有用。 - Anton

@Anton，这可能是可能的，但我已经有几年没有使用jQuery编写过任何东西了，而且我从未感觉过更好。必须使用一个正确组织的框架来工作比在jQuery粘合的DOM修改上工作要好9000倍，即使addEventListener需要更长时间编写，一个正确完成的框架可以防止显式创建任何类型的事件监听器。了解内部原理有助于进一步发展。 - Loïc Faure-Lacroix

感谢Loïc和Anton的回答。非常感激。 - GTS Joe

@Loïc Faure-Lacroix，除了jQuery之外的任何JS框架都不在本问题的范围内。 GTS Joe要求比较这3种方法，就是这样。正如我所说，如果您关心旧浏览器（例如IE 8），则应该选择jQuery方式。例如，IE 8根本不支持addEventListener-它使用MS专有的attachEvent方法。这就是为什么jQuery在过去几年中变得如此流行的原因-您不必担心浏览器差异。我很清楚地理解这一点，因为我长时间抵制使用jQuery。当然，新浏览器的情况要好得多。 - Anton

那么，如果你需要支持一个7年前的浏览器，你仍然只能使用jQuery 1.x（对于IE9+使用jQuery 2.x）。考虑其他框架并不超出范围，有很多好的替代品，可能有些人不知道。 - Loïc Faure-Lacroix

Answer 2

不，它们并不相同。你可以尝试：

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

当窗口大小改变时，函数1和函数2都会响应。

但是如果你使用了

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

只有function2有反应。

- jilykate