如何在 JavaScript 中附加窗口大小调整事件侦听器？答案

【问题标题】：How can I attach a window resize event listener in JavaScript?如何在 JavaScript 中附加窗口大小调整事件侦听器？
【发布时间】：2012-11-30 18:50:56
【问题描述】：

我正在制作一个用于分发的 JS/PHP 插件。我希望它像这样易于安装：

<HTML>
<HEAD>
<TITLE>Testing my Plugin</TITLE>
<?php
  include 'path/to/myPlugin.php';
  echo getMyPluginHeadContent();
?>
</HEAD>
<BODY>
<?php
  echo getMyPluginContent("Arguments will go here");
?>
</BODY>
</HTML>

但是，我希望这个插件附加一个窗口调整大小监听器而不覆盖window.onresize，以防有任何其他脚本也需要使用该方法。 有没有像 document.addEventListener("resize", myResizeMethod, true); 这样的 javascript 命令？ 我知道不是这样，因为那不起作用，而且 MDN 和 W3C 对 addEventListener 接受的参数非常模糊。

我不想要一个告诉我使用 window.onresize = myResizeMethod 或 <BODY ONRESIZE="myResizeMethod"> 的答案，因为它们对插件不友好。

【问题讨论】：

既然你想把这个添加到窗口中，你试过window.addEventListener吗？
几乎任何 .on = 都可以变成 .addEventListener(, )
@bhamlin ：有见地的评论，谢谢。

标签： javascript plugins

【解决方案1】：

由于您试图在调整窗口大小时调用此函数，因此您需要将该函数绑定到窗口而不是文档。要支持小于 9 的 IE 版本，您需要使用attachEvent。请注意attachEvent 要求您指定on 关键字。这是一个例子：

if(window.attachEvent) {
    window.attachEvent('onresize', function() {
        alert('attachEvent - resize');
    });
}
else if(window.addEventListener) {
    window.addEventListener('resize', function() {
        console.log('addEventListener - resize');
    }, true);
}
else {
    //The browser does not support Javascript event binding
}

同样，您可以以相同的方式删除事件。使用removeEventListener 时，请确保传递的useCapture 值与调用addEventListener 时传递的值相同。这是第三个参数，即true/false 值。

if(window.detachEvent) {
    window.detachEvent('onresize', theFunction);
}
else if(window.removeEventListener) {
    window.removeEventListener('resize', theFunction, true);
}
else {
    //The browser does not support Javascript event binding
}

【讨论】：

除了在您的示例代码中忘记);，这是完美的！谢谢！
@Supuhstar 哎呀，修复了代码。很高兴你能够让它工作。
我已经把它放在else:var oldresize = window.onresize; window.onresize = function() { if(oldresize) oldresize(); /* My code here... */ }。然后分离它，我做window.onload = oldload;.
@Supuhstar 我很困惑你为什么要这样做。 attachEvent 和 addEventListener 保持绑定到它们的函数的顺序。要分离，您只需使用正确的函数并将函数作为参数。只要记住你的函数必须存储在一个变量var myFunc = ...中，以确保内存地址相同才能解绑。
@Supuhstar 我希望您永远不会遇到缺少该支持的浏览器（那些将是非常旧的浏览器），但我很高兴您有解决方法。

【解决方案2】：

您不会调整文档的大小，而是调整窗口的大小。这有效：

window.addEventListener("resize", function(){console.log('resize!')}, true);

【讨论】：

除此之外，您还需要在 IE attachEvent。
@Kyle 我不知道（我的网站要么不兼容 IE8，要么不基于 jquery）。随意建立自己的答案。我在您的评论中看到您也知道窗口与文档。
谢谢。我将在一分钟内发布一个示例的答案。
+1 以获得有效答案，但我接受了另一个以确保完整性
这是 IE 8 中的多个触发器。我找不到发生这种情况的原因。