JavaScript - Window/Document Events

您好，有志於编程的同学们！今天，我們將要深入探索JavaScript事件的精彩世界，特別聚焦於Window和Document事件。作為您親切友善的鄰居計算機老師，我在這裡將通過大量的範例和解釋來引導你們開展這次旅程。所以，拿起你們最喜歡的飲料，放鬆一下，我們開始吧！

Window Events

Window事件是與瀏覽器窗口本身相關的動作。這些事件對於創建動態和響應迅速的網頁應用程序非常有用。讓我們探討一些最常見的window事件：

1. load

load事件在整個頁面（包括所有依赖資源，如樣式表和圖像）完成加載時觸發。這通常用於確保在運行腳本之前所有元素都可用。

window.addEventListener('load', function() {
console.log("頁面已完全加載！");
});

在這個例子中，我們正在為window對象添加一個事件監聽器。當'load'事件發生時，我們的函數將運行，將消息記錄到控制台。

2. resize

resize事件在瀏覽器窗口調整大小时觸發。這可以用於調整佈局或重新計算尺寸。

window.addEventListener('resize', function() {
console.log("窗口調整為: " + window.innerWidth + "x" + window.innerHeight);
});

在這裡，我們在窗口調整大小时記錄窗口的新尺寸。這對於響應式設計調整非常有用。

3. scroll

scroll事件在用戶在窗口中滾動時觸發。這可以用於實現無窮滾動或基於滾動位置顯示/隱藏元素。

window.addEventListener('scroll', function() {
let scrollPosition = window.scrollY;
console.log("滾動到位置: " + scrollPosition);

if (scrollPosition > 300) {
document.getElementById('backToTop').style.display = 'block';
} else {
document.getElementById('backToTop').style.display = 'none';
}
});

在這個例子中，當用戶向下滾動超過300像素時，我們顯示一個'返回頂部'按鈕。

4. unload

unload事件在用戶導航離開頁面時觸發。這可以用於清理任務或離開前提示用戶。

window.addEventListener('unload', function(event) {
event.preventDefault();
event.returnValue = '';
});

這段代碼將在用戶嘗試離開頁面時彈出一個確認對話框。記住要謹慎使用，因為這可能會讓用戶感到煩躁！

Document Events

Document事件與HTML文檔本身相關。這些事件讓我們能以各種方式與頁面內容互動。讓我們看看一些關鍵的document事件：

1. DOMContentLoaded

DOMContentLoaded事件在初始HTML文檔已經完全加載和解析，但不等待外部資源完成加載時觸發。

document.addEventListener('DOMContentLoaded', function() {
console.log("DOM已準備好！");
document.getElementById('myButton').addEventListener('click', function() {
alert("按鈕已點擊！");
});
});

這個事件通常比window.load更受偏好，因為它不等待圖像和其他資源完成加載，從而允許更快地執行腳本。

2. click

click事件在元素被點擊時觸發。這是您將會遇到的最常見事件之一。

document.getElementById('myButton').addEventListener('click', function(event) {
console.log("按鈕在坐標點擊: " + event.clientX + ", " + event.clientY);
event.target.style.backgroundColor = 'red';
});

在這個例子中，我們記錄點擊的坐標並在點擊按鈕時更改按鈕的顏色。

3. keydown 和 keyup

這些事件在按鍵被按下（keydown）或釋放（keyup）時觸發。

document.addEventListener('keydown', function(event) {
console.log("按鍵被按下: " + event.key);
if (event.key === 'Enter') {
document.getElementById('submitButton').click();
}
});

這段代碼記錄每次按鍵並在按Enter鍵時模擬點擊提交按鈕。

4. mouseover 和 mouseout

這些事件在鼠標指針進入（mouseover）或離開（mouseout）元素時觸發。

let hoverElement = document.getElementById('hoverMe');

hoverElement.addEventListener('mouseover', function() {
this.style.backgroundColor = 'yellow';
});

hoverElement.addEventListener('mouseout', function() {
this.style.backgroundColor = '';
});

這創造了一個簡單的懸停效果，當鼠標悬停在元素上時更改背景色。

事件方法表

這裡是一個方便的表格，總結了我們討論過的方法：

事件	描述	範例
load	在頁面完全加載時觸發	window.addEventListener('load', function() {...})
resize	在窗口調整大小时觸發	window.addEventListener('resize', function() {...})
scroll	在窗口滾動時觸發	window.addEventListener('scroll', function() {...})
unload	在導航離開頁面時觸發	window.addEventListener('unload', function(event) {...})
DOMContentLoaded	在DOM準備好時觸發	document.addEventListener('DOMContentLoaded', function() {...})
click	在元素被點擊時觸發	element.addEventListener('click', function(event) {...})
keydown	在按鍵被按下時觸發	document.addEventListener('keydown', function(event) {...})
keyup	在按鍵被釋放時觸發	document.addEventListener('keyup', function(event) {...})
mouseover	在鼠標指針進入元素時觸發	element.addEventListener('mouseover', function() {...})
mouseout	在鼠標指針離開元素時觸發	element.addEventListener('mouseout', function() {...})

好了，各位！我們已經涵蓋了JavaScript中Window和Document事件的基本知識。記住，實踐出真知，所以不要害怕在您自己的項目中嘗試這些事件。在您知道之前，您將會像專業人士一樣創建有互動性和動態性的網頁！

快樂編程，願您的事件總是按預期觸發！

Credits: Image by storyset