Javascript + onresize事件

Question

为什么我不能将onresize的多个实例添加到window元素？例如，只有第二个onresize事件(轮胎)会跟踪到日志：

var windowResize = {    
  fire : function(){ window.onresize = function(){ console.log('fire') }},
  tire : function(){ window.onresize = function(){ console.log('tire') }}
}
windowResize.fire();
windowResize.tire();

Answer 1

@Hemant是绝对正确的。

纯javascript代码的另一个版本是这样的。

var windowResize = {    
  fire : function(){ window.addEventListener('resize', function(){console.log('fire');}, false);},
  tire : function(){ window.addEventListener('resize', function(){console.log('tire');}, false);}
} 

windowResize.fire();
windowResize.tire();

Answer 2

这是因为DOM默认事件可以有一个附加的处理程序。当您第二次注册resize事件时，它会覆盖以前的值。

您可以使用jQuery或其他库来实现这一点，它们可以保存特定事件的处理程序数组，并在事件发生时触发所有处理程序。

使用jquery将如下所示

var windowResize = {    
  fire : function(){ $(window).resize( function(){ console.log('fire')});},
  tire : function(){ $(window).resize (function(){ console.log('tire') });}
}
windowResize.fire();
windowResize.tire();

希望能有所帮助

Answer 3

根据W3C，您不能为同一事件处理程序设置多个函数。您可以像这样使用jQuery：

$('#foo').bind('resize', function() {
  console.log('fire');
  console.log('tire');
});

我希望我能帮上忙，^_^