Как я могу прикрепить прослушиватель событий изменения размера окна в 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>

Тем не менее, я хочу, чтобы этот плагин прикреплял прослушиватель окна к размеру без переопределения window.onresize, если есть другие скрипты, которые также требуют использования этого метода. Есть ли какая-нибудь команда javascript, например document.addEventListener("resize", myResizeMethod, true);? Я знаю, что не она, потому что это не работает, а MDN и W3C очень смутно относятся к тем, что принимает аргументы addEventListener.

Мне не нужен ответ, говорящий мне использовать window.onresize = myResizeMethod или <BODY ONRESIZE="myResizeMethod">, поскольку они не являются плагинами.

Ответ 1

Поскольку вы пытаетесь вызвать эту функцию при изменении размера окна, вам нужно привязать функцию к окну, а не к документу. Для поддержки версий 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
}

Ответ 2

Вы не изменяете размер документа, кроме окна. Это работает:

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