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

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响应.