How can I attach a window resize event listener in JavaScript?

Question

I'm making a JS/PHP plugin for distribution. I want it to be as easy to install as this:

<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>

However, I want this plugin to attach a window resize listener without overriding window.onresize, in case there are any other scripts that also require the use of that method. Is there any javascript command like document.addEventListener("resize", myResizeMethod, true);? I know that's not it, because that's not working, and the MDN and W3C are very vague about what arguments addEventListener takes.

I do not want an answer telling me to use window.onresize = myResizeMethod or <BODY ONRESIZE="myResizeMethod">, as these are not as plugin-friendly.

Since you are trying to add this to the window, have you tried `window.addEventListener`? — Kyle, Nov 30 '12 at 18:52
Pretty much any .on = can be turned into a .addEventListener(, ) — bhamlin, Nov 30 '12 at 18:54

Kyle · Accepted Answer · 2020-06-23T18:59:15.307

81

Since you are trying to call this function on the resize of the window, you will want to bind the function to the window and not to the document. To support versions of IE that are less than 9, you will want to use attachEvent. Please note that attachEvent requires you to specify the on keyword. Here is an example:

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
}

Similarly, you can remove events in the same way. When using removeEventListener, make sure that you pass the same value of useCapture as you did when calling addEventListener. This is the third parameter which is the true/false value.

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
}

edited Jun 23 '20 at 18:59

answered Nov 30 '12 at 19:03

Kyle

4,421
22
32

Other than forgetting a `);` in your example code, this is perfect! Thank you! – Ky - Dec 01 '12 at 00:24
@Supuhstar Oops, fixed the code. Glad you were able to get it working. – Kyle Dec 03 '12 at 12:50
I've taken to putting this in the `else`: `var oldresize = window.onresize; window.onresize = function() { if(oldresize) oldresize(); /* My code here... */ }`. Then to detatch it, I do `window.onload = oldload;`. – Ky - Apr 01 '14 at 15:49
@Supuhstar I'm confused as to why you are doing that. `attachEvent` and `addEventListener` keep the order of functions bound to them. To detach, you just need to use the correct function with the function as the argument. Just remember that your function must be stored in a variable `var myFunc = ...` to ensure that the memory address is the same to unbind. – Kyle Apr 01 '14 at 17:37
This also keeps order, and I only use it if `attachEvent` and `addEventListener` are both unavailable. – Ky - Apr 01 '14 at 18:28
1

@Supuhstar I hope that you never come across a browser that is lacking that support (those would be very old browsers), but I am glad that you have a workaround for it. – Kyle Apr 01 '14 at 18:49
Since the `window.addEventListener('resize', ... , true);` is `true` for the `useCapture` parameter, the method `window.removeEventListener('resize', theFunction);` requires a `true` in order to work properly. `window.removeEventListener('resize', theFunction, true);` – Diego Mariano Feb 26 '20 at 12:09
@DiegoMariano Thank you for pointing that out. Yes, the `useCapture` should be the same and the default assumption is `false` if not specified. I have updated my answer to reflect that. – Kyle Jun 23 '20 at 18:59
Is there any reason (besides that it was what OP used) that this answer has `useCapture` of `true` instead of relying upon the default value of `false`? – rinogo Aug 30 '21 at 23:23
@rinogo In the example, `true` was supplied to the `addEventListener` function. To remove that listener, the `useCapture` must match what was supplied when you registered. Here's the [documentation](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener) on that – Kyle Nov 04 '21 at 20:11

score 33 · Answer 2 · answered Nov 30 '12 at 18:53

33

You don't resize the document but the window. This works :

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

answered Nov 30 '12 at 18:53

Denys Séguret

372,613
87
782
758

2

As an addition to this, you will want to use `attachEvent` for versions of IE < 9. – Kyle Nov 30 '12 at 18:56
@Kyle I didn't knew that (my sites are either not IE8 compatible or jquery based). Feel free to build your own answer. I see in your comment that you knew for window vs document too. – Denys Séguret Nov 30 '12 at 18:58
Thank you. I shall post an answer in a minute with an example. – Kyle Nov 30 '12 at 18:59
2

+1 for a valid answer, but I accepted the other for completeness – Ky - Dec 01 '12 at 00:24
This is trigger more than one in IE 8. I couldnt find why that happens. – Günay Gültekin Nov 12 '14 at 15:14

score 2 · Answer 3 · answered Nov 01 '22 at 02:22

2

I highly recommend ResizeObserver

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

Example of use:

const resizeObserver = new ResizeObserver(e => {
    console.log(e);
});

resizeObserver.observe(document.body);

answered Nov 01 '22 at 02:22

asciidude

272
1
3
19

How can I attach a window resize event listener in JavaScript?

3 Answers3

Linked