web-dev-qa-db-ja.com

JavaScriptでウィンドウサイズ変更イベントリスナーをアタッチするにはどうすればよいですか？

配布用に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>
_

ただし、このメソッドの使用を必要とする他のスクリプトがある場合に備えて、このプラグインにウィンドウサイズ変更リスナーをアタッチしますwithoutオーバーライド_window.onresize_。 document.addEventListener("resize", myResizeMethod, true);？のようなjavascriptコマンドはありますか？私はそれが機能していないため、そうではないことを知っています。MDNとW3CはaddEventListenerが取る引数について非常にあいまいです。

_window.onresize = myResizeMethod_または_<BODY ONRESIZE="myResizeMethod">_を使用するように指示する回答は必要ありません。これらはプラグインフレンドリーではありません。

javascriptplugins
26
Supuhstar

ウィンドウのサイズを変更するときにこの関数を呼び出そうとしているため、関数をドキュメントではなくウィンドウにバインドする必要があります。 IEの9未満のバージョンをサポートするには、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
}
58
Kyle

ドキュメントではなくウィンドウのサイズを変更します。これは動作します：

window.addEventListener("resize", function(){console.log('resize!')}, true);
21
Denys Séguret