JavaScript - Handler

JavaScript Handlers 的介紹

你好，有志青年程序員！今天，我們將要深入探索JavaScript handlers的精彩世界。作為你們親切友善的鄰居計算機老師，我會帶領你們開展這次旅程，並提供大量的範例和解釋。所以，拿起你們最喜歡的飲料，放鬆身心，我們開始吧！

JavaScript中的Handler是什麼？

在JavaScript中，handler是一個當特定事件發生時被調用的函數。把它當作一個總是在待命的特殊助手，等待某件事情的發生。當那件事情發生時，我們的handler就會采取行動！

讓我們從一個簡單的範例開始：

let button = document.querySelector('button');
button.onclick = function() {
alert('Hello, World!');
};

在這段代碼中，我們告訴JavaScript：“嘿，當有人點擊這個按鈕時，顯示一個告警說'Hello, World!'”。我們分配給button.onclick的函數就是我們的handler。

常見的Handlers類型

JavaScript有許多類型的handlers。讓我們看看一些最常見的：

Handler類型	說明	範例
onclick	當元素被點擊時觸發	element.onclick = function() { ... }
onmouseover	當鼠標移動到元素上方時觸發	element.onmouseover = function() { ... }
onkeydown	當按下一個鍵時觸發	document.onkeydown = function(event) { ... }
onload	當頁面或圖像加載完畢時觸發	window.onload = function() { ... }
onsubmit	當表單被提交時觸發	form.onsubmit = function(event) { ... }

創建和使用Handlers

方法1：HTML屬性

創建handler的一種方法是直接將其作為屬性添加到HTML元素中。這裡有一個範例：

<button onclick="alert('Clicked!')">點我</button>

當你點擊這個按鈕時，它會顯示一個告警說"Clicked!"。簡單吧？

方法2：DOM屬性

一種更靈活的方法是使用JavaScript將handler分配給元素的屬性：

let button = document.querySelector('button');
button.onclick = function() {
console.log('按鈕被點擊了！');
};

這種方法允許我們動態地更改handler並在函數內部訪問元素。

方法3：addEventListener

最強大的方法是使用addEventListener。它允許我們為同一事件添加多個handler：

let button = document.querySelector('button');
button.addEventListener('click', function() {
console.log('第一個handler');
});
button.addEventListener('click', function() {
console.log('第二個handler');
});

現在，當你點擊按鈕時，兩條消息都會被記錄到控制台！

Event對象

當事件發生時，JavaScript會創建一個包含發生事件細節的'event'對象。我們可以在我們的handler中訪問這個對象：

document.onmousemove = function(event) {
console.log('鼠標位置：', event.clientX, event.clientY);
};

這段代碼會在鼠標移動時記錄鼠標的位置。event對象為我們提供了各種有用的信息！

移除Handlers

有時，我們需要移除handler。這是我們如何做到這一點：

let button = document.querySelector('button');
function handler() {
console.log('Clicked!');
button.removeEventListener('click', handler);
}
button.addEventListener('click', handler);

這個handler只會運行一次，因為它在第一次點擊後就會移除自己！

實用範例：一個簡單遊戲

讓我們把所有這些知識結合起來，創造一個有趣的簡單遊戲。我們將創建一個當你嘗試點擊它時會移動的按鈕：

<button id="catch-me">抓到我如果你能！</button>

<script>
let button = document.getElementById('catch-me');
button.addEventListener('mouseover', function() {
let top = Math.random() * (window.innerHeight - this.offsetHeight);
let left = Math.random() * (window.innerWidth - this.offsetWidth);
this.style.top = top + 'px';
this.style.left = left + 'px';
});

button.addEventListener('click', function() {
alert('恭喜你！你抓到我了！');
});
</script>

在這個遊戲中，當你嘗試將鼠標移動到按鈕上方時，按鈕會移動到隨機位置。如果你能夠點擊它，你就贏了！

結論

好了，各位！我們已經涵蓋了JavaScript handlers的基本知識，從它是什麼到如何在實際情況中使用它們。記住，熟能生巧，所以不要害怕嘗試這些概念。

就像我總是告訴我的學生，編程就像學騎自行車一樣。起初可能會有些晃動，但隨著練習，你會很快騎得飛快！持續編程，持續學習，最重要的是，玩得開心！

Credits: Image by storyset