Window Events in JavaScript

1// Method 1: Load event
2window.addEventListener('load', function() {
3    console.log('Page fully loaded');
4    // All resources loaded
5});
6
7// Method 2: DOMContentLoaded (faster)
8document.addEventListener('DOMContentLoaded', function() {
9    console.log('DOM ready');
10    // DOM ready, images may still load
11});
12
13// Method 3: Before unload
14window.addEventListener('beforeunload', function(e) {
15    e.preventDefault();
16    e.returnValue = ''; // Chrome requires returnValue
17    return ''; // Some browsers
18    // Shows confirmation dialog
19});
20
21// Method 4: Unload
22window.addEventListener('unload', function() {
23    console.log('Page unloading');
24    // Cleanup code
25});
26
27// Method 5: Resize
28window.addEventListener('resize', function() {
29    console.log('Window resized');
30    console.log('Width:', window.innerWidth);
31    console.log('Height:', window.innerHeight);
32});
33
34// Method 6: Scroll
35window.addEventListener('scroll', function() {
36    console.log('Scrolled');
37    console.log('Scroll Y:', window.scrollY);
38    console.log('Scroll X:', window.scrollX);
39});
40
41// Method 7: Scroll with throttling
42let scrollTimeout;
43window.addEventListener('scroll', function() {
44    clearTimeout(scrollTimeout);
45    scrollTimeout = setTimeout(function() {
46        console.log('Scroll ended');
47    }, 150);
48});
49
50// Method 8: Visibility change
51document.addEventListener('visibilitychange', function() {
52    if (document.hidden) {
53        console.log('Page hidden');
54    } else {
55        console.log('Page visible');
56    }
57});
58
59// Method 9: Online/Offline
60window.addEventListener('online', function() {
61    console.log('Connection restored');
62});
63
64window.addEventListener('offline', function() {
65    console.log('Connection lost');
66});
67
68// Method 10: Focus/Blur
69window.addEventListener('focus', function() {
70    console.log('Window focused');
71});
72
73window.addEventListener('blur', function() {
74    console.log('Window blurred');
75});
76
77// Method 11: Hash change (URL fragment)
78window.addEventListener('hashchange', function() {
79    console.log('Hash changed:', window.location.hash);
80});
81
82// Method 12: Popstate (back/forward)
83window.addEventListener('popstate', function(e) {
84    console.log('History changed');
85    console.log('State:', e.state);
86});
87
88// Method 13: Error handling
89window.addEventListener('error', function(e) {
90    console.error('Global error:', e.message);
91    console.error('File:', e.filename);
92    console.error('Line:', e.lineno);
93});
94
95window.addEventListener('unhandledrejection', function(e) {
96    console.error('Unhandled promise rejection:', e.reason);
97});