JavaScript 中的視窗大小調整事件
本教程將討論使用 JavaScript 中的 addEventListener() 和 onresize() 函式新增調整大小事件。
使用 JavaScript 中的 addEventListener() 函式新增調整大小事件
要向視窗新增調整大小事件，我們可以使用 JavaScript 中的 addEventListener() 函式。此函式向物件新增包含函式的事件。例如，讓我們向物件視窗新增一個事件以獲取其寬度和高度並將其顯示在網頁上。請參考下面的程式碼。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span>Width = </span><span id="SpanID1"></span>
<br />
<span>Height = </span><span id="SpanID2"></span>
<script type="text/javascript">
start();
window.addEventListener('resize', start);
function start(){
document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;
document.getElementById('SpanID2').innerText = document.documentElement.clientHeight;
}
</script>
</body>
</html>
輸出：
Width = 798
Height = 779
在上面的程式碼中，我們新增了一個帶有文字 Width= 的 span，然後，我們在 body 部分新增了一個 id 為 SpanID1 的空 span。我們新增了一個 br 標籤來將游標移動到一個新行，在新行上，我們新增了另一個帶有文字 Height= 的 span，之後，我們新增了另一個 id 為 SpanID2 的空 span。
跨度的 id 將用於獲取 JavaScript 中的元素。在指令碼標籤中，我們有一個函式 start()，用於改變兩個 span 的文字與視窗的寬度和高度。在 start() 函式之後，我們新增了 resize 事件，當使用者調整視窗大小時，它將呼叫 start() 函式。視窗的寬度和高度會顯示在頁面上，並且會隨著視窗大小的變化而變化。你可以將上述程式碼儲存到 HTML 檔案中，然後使用任何瀏覽器開啟它並更改其大小以檢視程式碼是否有效。你還可以使用 addEventListener() 函式將事件新增到任何物件，例如核取方塊。
使用 JavaScript 中的 onresize() 函式新增調整大小事件
要向視窗新增調整大小事件，我們可以使用 JavaScript 中的 onresize() 函式。此函式用於指定更改視窗大小時會發生什麼。例如，讓我們向物件視窗新增一個事件以獲取其寬度和高度並將其顯示在網頁上。請參考下面的程式碼。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span>Width = </span><span id="SpanID1"></span>
<br />
<span>Height = </span><span id="SpanID2"></span>
<script type="text/javascript">
start();
window.onresize = start;
function start(){
document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;
document.getElementById('SpanID2').innerText = document.documentElement.clientHeight;
}
</script>
</body>
</html>
輸出：
Width = 798
Height = 779
在上面的程式碼中，如果視窗的大小正在改變，start() 函式將被呼叫。如你所見，輸出與上述方法相同。
