How can I attach a window resize event listener in JavaScript?
You don't resize the document but the window. This works :
window.addEventListener("resize", function(){console.log('resize!')}, true);
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
}