Window Events
Window events in JavaScript are essential for building interactive and user-friendly web applications. They enable developers to detect and respond to changes in the browser window or user interactions, such as resizing, scrolling, or loading. By mastering these events, you can create responsive applications that deliver seamless user experiences.
In this section, we’ll cover the following topics:
- What Are Window Events?
- Implementing Window Events with AI Assistance
- Best Practices for Window Events
What Are Window Events?
Window events are specific interactions or changes associated with the browser window or the document object in JavaScript. They allow developers to monitor and respond to user activities like resizing, scrolling, or fully loading a webpage. These events are foundational for creating adaptive and dynamic web experiences.
Common Window Events
- load: Fires when the entire page, including all assets, is fully loaded.
- resize: Triggered when the browser window size changes.
- scroll: Fires when the user scrolls through the page.
- beforeunload: Triggered just before the user leaves the page, allowing a chance to display a confirmation dialog.
- error: Fired when a JavaScript error occurs or a resource fails to load.
Key Properties and Methods
- window.innerWidth / window.innerHeight: Provides the dimensions of the visible area of the browser window.
- window.scrollX / window.scrollY: Returns the current horizontal and vertical scroll offsets.
- window.location: Allows access to or modification of the current URL.
- window.alert(): Displays an alert dialog box.
- window.confirm(): Displays a confirmation dialog box, asking for user confirmation.
Implementing Window Events with AI Assistance
Window events open up endless possibilities for interactive applications, and when paired with AI, they can become even smarter and more adaptive. This section will guide you through practical examples that demonstrate how to implement window events effectively.
Preparing for Practice Files
This course takes a hands-on approach, allowing you to apply the techniques covered in real-world scenarios. We’ll use a structured folder layout. Before proceeding with the examples, please ensure the following files are prepared:
/your-project-folder/
|─07-09-window-events/ (<- sub-folder)
|─ example-1.css
|─ example-1.html
|─ example-1.js
|─ example-2.css
|─ example-2.html
|─ example-2.js
|─ example-3.css
|─ example-3.html
|─ example-3.js
|─ example-4.css
|─ example-4.html
|─ example-4.js
For your convenience, these files are also available on our GitHub repository.
AI Case 1: Button That Activates Only After Page Load
Ensuring that buttons or functionalities activate only after the page is fully loaded provides a polished user experience.
Sample AI prompt:
Create a button that remains disabled until the webpage fully loads. Add an instructional message above the button explaining its behavior. Center the UI horizontally and use a modern design for clarity and aesthetic appeal.
Include:
- HTML (example-1.html) for an instructional message, a styled button, and a container.
- CSS (example-1.css) to center the button horizontally and apply modern styles.
- JavaScript (example-1.js) to enable the button once the page is fully loaded and update its text dynamically.
Sample code output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Button Activation on Page Load</title>
<link rel="stylesheet" href="example-1.css" />
<script src="example-1.js" defer></script>
</head>
<body>
<div class="container">
<h1>Button Activation Demo</h1>
<p>
The button below will activate 5 seconds after the page has fully
loaded.
</p>
<button id="loadButton" disabled>Loading...</button>
</div>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
button {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 4px;
background-color: #ddd;
color: #555;
cursor: not-allowed;
transition: background-color 0.3s, color 0.3s;
}
button.enabled {
background-color: #4caf50;
color: white;
cursor: pointer;
}
window.addEventListener("load", () => {
const button = document.getElementById("loadButton");
// Simulate a delay of 5 seconds after the page load
setTimeout(() => {
button.textContent = "Ready to Click";
button.disabled = false;
button.classList.add("enabled");
}, 5000); // 5000ms = 5 seconds
});
Instructions to see the results:
Save the code above in each file. Open the HTML file in your browser to view the button behavior after the page loads.
To see how the code works, you can also check out the link below.
AI Case 2: Button That Scrolls Back to the Top
This example demonstrates how to create a "Back to Top" button that appears when the user scrolls down the page.
Sample AI prompt:
Create a "Back to Top" button that appears when the user scrolls down. Add an instructional message explaining its behavior. Center the UI horizontally and apply modern styling.
Include:
- HTML (example-2.html) for the button and instructional text.
- CSS (example-2.css) to style the button with modern aesthetics.
- JavaScript (example-2.js) to display the button when scrolling and enable smooth scrolling behavior when clicked.
Sample code output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Scroll to Top Button</title>
<link rel="stylesheet" href="example-2.css" />
<script src="example-2.js" defer></script>
</head>
<body>
<div class="content">
<h1>Scroll Down</h1>
<p>Scroll down to see the "Back to Top" button appear.</p>
<div style="height: 2000px"></div>
<button id="scrollTopButton" hidden>⬆ Back to Top</button>
</div>
</body>
</html>
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.content {
text-align: center;
padding: 20px;
}
#scrollTopButton {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
font-size: 14px;
border: none;
border-radius: 4px;
background-color: #4caf50;
color: white;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: none;
transition: opacity 0.3s, transform 0.3s;
}
#scrollTopButton.show {
display: block;
opacity: 1;
transform: translateX(-50%) translateY(0);
}
const scrollButton = document.getElementById("scrollTopButton");
window.addEventListener("scroll", () => {
if (window.scrollY > 300) {
scrollButton.classList.add("show");
} else {
scrollButton.classList.remove("show");
}
});
scrollButton.addEventListener("click", () => {
window.scrollTo({ top: 0, behavior: "smooth" });
});
Instructions to see the results:
Save the code above in each file. Open the HTML file in your browser and scroll down to see the button appear.
To see how the code works, you can also check out the link below.
AI Case 3: Button That Responds to Page Resize
This example demonstrates a button that dynamically changes its text and style based on the browser window size.
Sample AI prompt:
Create a button that responds to browser window resizing. Add an instructional message above the button explaining its behavior. Center the UI horizontally and use a modern design.
Include:
- HTML (example-3.html) for the button and instructional message.
- CSS (example-3.css) to style the button with modern aesthetics and adapt its appearance dynamically.
- JavaScript (example-3.js) to change the button’s text and style based on window size.
Sample code output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Button</title>
<link rel="stylesheet" href="example-3.css" />
<script src="example-3.js" defer></script>
</head>
<body>
<div class="container">
<h1>Responsive Button Demo</h1>
<p>Resize the browser window to see the button adapt.</p>
<button id="resizeButton">Resize Me!</button>
</div>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
button {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 4px;
background-color: #4caf50;
color: white;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
}
button.small {
background-color: #ff5722;
transform: scale(0.9);
}
button.large {
background-color: #4caf50;
transform: scale(1.1);
}
const button = document.getElementById("resizeButton");
function handleResize() {
if (window.innerWidth < 600) {
button.textContent = "Small Screen!";
button.classList.add("small");
button.classList.remove("large");
} else {
button.textContent = "Large Screen!";
button.classList.add("large");
button.classList.remove("small");
}
}
window.addEventListener("resize", handleResize);
// Initialize button state on page load
handleResize();
Instructions to see the results:
Save the code above in each file. Open the HTML file in your browser and resize the window to see the button adapt.
To see how the code works, you can also check out the link below.
AI Case 4: Exit Confirmation on Button Click
This example demonstrates a button that enables an exit confirmation dialog when clicked.
Sample AI prompt:
Create a button that enables an exit confirmation dialog when clicked. Add an instructional message above the button explaining its functionality. Center the UI horizontally and use a modern design.
Include:
- HTML (example-4.html) for the button and instructional message.
- CSS (example-4.css) to style the button prominently.
- JavaScript (example-4.js) to enable the confirmation dialog on click.
Sample code output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Exit Confirmation</title>
<link rel="stylesheet" href="example-4.css" />
<script src="example-4.js" defer></script>
</head>
<body>
<div class="container">
<h1>Exit Confirmation Demo</h1>
<p>Click the button below to enable an exit confirmation dialog.</p>
<button id="exitButton">Enable Exit Confirmation</button>
</div>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
button {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 4px;
background-color: #ff5722;
color: white;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
}
button:hover {
background-color: #e64a19;
}
const button = document.getElementById("exitButton");
button.addEventListener("click", () => {
window.addEventListener("beforeunload", (event) => {
event.preventDefault();
event.returnValue = ""; // Required for most browsers to show confirmation dialog
});
alert("Exit confirmation enabled. Try closing or refreshing the page.");
});
Instructions to see the results:
Save the code above in each file. Open the HTML file in your browser. Click the button and attempt to leave the page to trigger the exit confirmation.
To see how the code works, you can also check out the link below.
Best Practices for Window Events
Using window events effectively ensures your applications remain robust, efficient, and user-friendly. Follow these best practices to optimize performance and enhance maintainability:
- Debounce or Throttle Events
For high-frequency events likeresizeandscroll, use techniques such as debounce or throttle to limit the rate of event handling. This helps prevent performance bottlenecks and ensures smooth application behavior. - Check for Browser Support
Before implementing specific events or properties, verify browser compatibility to ensure consistent functionality across all user environments. Use tools likeCan I Useor feature detection in your code. - Unregister Event Listeners
Remove event listeners when they are no longer needed. This prevents memory leaks and improves overall application performance, especially in dynamic interfaces. - Use Modern APIs
Leverage modern APIs likeIntersectionObserverfor scroll-related functionality. These APIs are more efficient than traditionalscrollevent listeners, particularly for handling visibility detection or lazy loading.
By following these best practices, you can create responsive and scalable applications that provide a seamless user experience while maintaining optimal performance.
Reference links:
More Topics to Explore
Styling Images
Building Websites – Frontend and Backend Coding
Color Code – HEX and RGB
Conditional Operators
