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

Question

我正在制作一个用于分发的 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 命令document.addEventListener("resize", myResizeMethod, true); ? 我知道不是这样，因为那是行不通的，而且 MDN 和 W3C 对addEventListener采用的参数非常模糊。

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

Answer 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 ，请确保传递与调用addEventListener时相同的useCapture值。 这是第三个参数，它是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
}

Answer 2

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

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

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

问题描述

2 个解决方案

解决方案1
72 已采纳 2012-11-30 19:03:08

解决方案2
30 2012-11-30 18:53:32

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

问题描述

2 个解决方案

解决方案1 72 已采纳 2012-11-30 19:03:08

解决方案2 30 2012-11-30 18:53:32

解决方案1
72 已采纳 2012-11-30 19:03:08

解决方案2
30 2012-11-30 18:53:32