JavaScript window resize event

Question

How can I hook into a browser window resize event?

There's a jQuery way of listening for resize events but I would prefer not to bring it into my project for just this one requirement.

Answer 1

Best practice is to attach to the resize event.

window.addEventListener('resize', function(event) {     ... }, true); 

jQuery is just wrapping the standard resize DOM event, eg.

window.onresize = function(event) {     ... }; 

jQuery may do some work to ensure that the resize event gets fired consistently in all browsers, but I'm not sure if any of the browsers differ, but I'd encourage you to test in Firefox, Safari, and IE.

Answer 2

First off, I know the addEventListener method has been mentioned in the comments above, but I didn't see any code. Since it's the preferred approach, here it is:

window.addEventListener('resize', function(event){   // do stuff here }); 

Here's a working sample.