Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Which is the event when the browser window is resized in JavaScript?
The resize event fires when the browser window is resized. You can listen for this event using window.addEventListener() or the onresize attribute to detect window size changes.
The resize Event
The resize event is triggered whenever the browser window dimensions change. This includes maximizing, minimizing, or manually dragging the window borders.
Method 1: Using addEventListener()
<!DOCTYPE html>
<html>
<head>
<title>Window Resize Event</title>
</head>
<body>
<h1>Window Resize Detector</h1>
<p>Resize your browser window to see the dimensions update:</p>
<div id="dimensions"></div>
<script>
function updateDimensions() {
const width = window.innerWidth;
const height = window.innerHeight;
const dimensionsDiv = document.getElementById('dimensions');
dimensionsDiv.innerHTML = `Window Width: ${width}px, Window Height: ${height}px`;
}
// Add event listener for resize
window.addEventListener('resize', updateDimensions);
// Display initial dimensions
updateDimensions();
</script>
</body>
</html>
Method 2: Using onresize Attribute
<!DOCTYPE html>
<html>
<head>
<title>Window Resize with onresize</title>
<script>
function resizeFunction() {
const val = "Window Width: " + window.innerWidth + "px, Window Height: " + window.innerHeight + "px";
document.getElementById("test").innerHTML = val;
}
</script>
</head>
<body onresize="resizeFunction()">
<h1>Resize Event Handler</h1>
<p>Resize browser window and check the window dimensions below:</p>
<p id="test">Initial dimensions will appear here</p>
<script>
// Show initial dimensions
resizeFunction();
</script>
</body>
</html>
Window Dimension Properties
JavaScript provides several properties to get window dimensions:
| Property | Description | Includes |
|---|---|---|
window.innerWidth |
Viewport width | Content area only |
window.innerHeight |
Viewport height | Content area only |
window.outerWidth |
Total window width | Browser chrome + scrollbars |
window.outerHeight |
Total window height | Browser chrome + scrollbars |
Throttling Resize Events
The resize event can fire many times during a single resize operation. Consider throttling for performance:
<!DOCTYPE html>
<html>
<head>
<title>Throttled Resize Event</title>
</head>
<body>
<h1>Throttled Resize Handler</h1>
<p>This example limits resize event handling to improve performance:</p>
<div id="output"></div>
<script>
let resizeTimeout;
function handleResize() {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => {
const output = document.getElementById('output');
output.innerHTML = `Throttled update: ${window.innerWidth}x${window.innerHeight}`;
}, 100); // Wait 100ms after resize stops
}
window.addEventListener('resize', handleResize);
// Initial display
document.getElementById('output').innerHTML = `Initial: ${window.innerWidth}x${window.innerHeight}`;
</script>
</body>
</html>
Conclusion
The resize event is the standard way to detect browser window resizing in JavaScript. Use addEventListener('resize') for modern applications, and consider throttling for performance-critical scenarios.
Updated on: 2026-03-15T23:18:59+05:30
201 Views
Advertisements