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

时间:2012-11-30 18:50:56

标签: javascript plugins

我正在制作一个用于发布的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">,因为这些不是插件友好的。

2 个答案:

答案 0 :(得分:53)

由于您尝试在窗口调整大小时调用此函数,因此您需要将函数绑定到窗口而不是文档。要支持小于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
}

同样,您可以以相同的方式删除事件

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

答案 1 :(得分:21)

您不会调整文档大小,只能调整窗口大小。这有效:

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