javascript - Javascript + onresize 事件

Question

为什么我不能向窗口元素添加多个 onresize 实例？例如，只有第二个 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 默认事件可以附加一个处理程序。当您第二次注册调整大小事件时，它会覆盖以前的值。

您可以使用 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');
});

希望对你有帮助^_^