JS Event handling是指處理網頁中各種事件（如按鈕點擊、滑鼠移動、按下鍵盤等）的能力，可以透過JavaScript代碼為HTML元素添加事件監聽器。當特定事件發生時，就執行對應的JavaScript代碼來處理該事件。
以下是一個簡單的例子：
HTML：
<button id="myButton">Click me!</button>
JavaScript：
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Button clicked!");
});
在此範例中，我們首先通過document.getElementById()方法獲取一個id為myButton的按鈕元素。然後，使用addEventListener()方法添加一個click事件監聽器，該監聽器會在按鈕被點擊時執行一個匿名函式，該函式會顯示一個彈出框，其中包含一條消息「Button clicked!」。
當按鈕被點擊時，事件系統會檢測到這個事件並觸發添加的監聽器，該監聽器執行了匿名函式，顯示了彈出框。這種方式的好處是，它可以讓開發者將相關邏輯和操作與HTML分離，使代碼更加模塊化和易於維護。
事件：JavaScript中的事件指的是可以在瀏覽器或文檔中發生的操作或行為，例如單擊、雙擊、鍵盤按鍵等。
事件處理程序：事件處理程序是指在事件發生時運行的函數。
事件監聽器：事件監聽器是指用於監聽當特定事件發生時自動調用函數的方法。它可以通過 addEventListener() 函數來實現。
事件對像：事件對象是在事件發生時傳遞給函數的參數，它包含有關事件的各種信息，例如事件類型、目標元素、鼠標位置等。
事件冒泡和事件捕獲：事件冒泡和事件捕獲是DOM事件模型中的兩種級別的事件傳播機制。事件捕獲是指從父級元素到目標元素的事件傳播，而事件冒泡是指從目標元素到父級元素的事件傳播。
阻止事件默認行為：通過調用事件對象的 preventDefault() 方法，可以阻止事件的默認行為，例如禁用鏈接的跳轉或表單提交等。
停止事件傳播：通過調用事件對象的 stopPropagation() 方法，可以停止事件的傳播，也就是阻止事件冒泡或事件捕獲。
事件委託：事件委託是指將事件處理程序綁定在父元素上，然後利用事件冒泡的機制來處理子元素的事件。
DOMContentLoaded 事件：DOMContentLoaded 事件是指在文檔加載完成後觸發的事件，用於執行需要在文檔載入完成之後才能執行的代碼。
resize 事件：resize 事件是指當瀏覽器窗口的大小發生改變時觸發的事件。
scroll 事件：scroll 事件是指當文檔滾動時觸發的事件。
mouseover 和 mouseout 事件：mouseover 和 mouseout 事件是指當鼠標移動到元素上方（mouseover）或離開元素（mouseout）時觸發的事件。
click 事件：click 事件是指當鼠標單擊元素時觸發的事件。
keydown、keyup 和 keypress 事件：keydown、keyup 和 keypress 事件是指當用戶按下或鬆開鍵盤鍵時觸發的事件。其中，keydown 和 keyup 事件傳遞的參數包含有關鍵盤按鍵的信息，而 keypress 事件則不包含。
load 事件：load 事件是指當文檔或圖片等資源加載完成時觸發的事件。
submit 事件：submit 事件是指當表單提交時觸發的事件，通常用於驗證表單輸入並防止表單重複提交。
答案：
window.addEventListener('load', function() {
// your code here
});
答案：
document.addEventListener('click', function(event) {
// 防止連結默認行為
event.preventDefault();
});
答案：
var element = document.getElementById('myElement');
element.addEventListener('mouseover', function() {
// 顯示提示框
alert('Hello, World!');
});
答案：
document.addEventListener('keydown', function(event) {
// 判斷按下的鍵是哪個
if (event.key === 'Enter') {
// 執行函數
doSomething();
}
});
答案：
var element = document.getElementById('myElement');
var x, y;
element.addEventListener('mousedown', function(event) {
// 記住滑鼠位置
x = event.clientX - element.offsetLeft;
y = event.clientY - element.offsetTop;
document.addEventListener('mousemove', moveElement);
});
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', moveElement);
});
function moveElement(event) {
// 計算新位置
var newX = event.clientX - x;
var newY = event.clientY - y;
// 設定新位置
element.style.left = newX + 'px';
element.style.top = newY + 'px';
}