JavaScript 事件列表

JavaScript 作為一門編程語言，有很多用途。其中最常見的使用是在 Web 開發中，主要用于動態交互效果的實現。在 JavaScript 中，事件是指用戶與網站交互時所出發的動作，例如點擊、鼠標滾動、鍵盤按鍵等。以下是一些常見的 JavaScript 事件，及其用法和示例。

常見的 JavaScript 事件：

1. click 事件

click 事件是最常用的 JavaScript 事件之一，它在用戶點擊指定的 HTML 元素時觸發。click 事件可以綁定到所有 HTML 元素上，包括 button、input、div 等。

const elem = document.querySelector('.btn');
elem.addEventListener('click', function(event) {
console.log('You clicked the button!');
});

2. mouseover 事件

mouseover 事件在用戶將鼠標移動到指定的 HTML 元素上時觸發。mouseover 事件常用于制作鼠標懸停效果。

const elem = document.querySelector('.hover');
elem.addEventListener('mouseover', function(event) {
event.target.style.backgroundColor = 'red';
});
elem.addEventListener('mouseout', function(event) {
event.target.style.backgroundColor = '';
});

3. keydown 事件

keydown 事件在用戶按下鍵盤上任意鍵時觸發。keydown 事件常用于制作鍵盤事件相關的操作，例如制作快捷鍵。

const elem = document.querySelector('.input');
elem.addEventListener('keydown', function(event) {
if (event.keyCode === 13) {
console.log('You pressed Enter key!');
}
});

4. submit 事件

submit 事件在用戶提交表單時觸發。submit 事件可以綁定到表單元素或者按鈕元素（如 type="submit"）上。

const form = document.querySelector('.form');
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('You submitted the form!');
});

總結

JavaScript 事件列表還有很多其他類型的事件，例如 scroll、load、resize 等。了解和熟練掌握不同類型事件的用法，可以讓我們更好地使用 JavaScript 為網站添加交互效果。