一、事件基礎概念
1.1 事件三要素
事件源：觸發事件的元素
事件類型：事件的種類（如click、mouseover等）
事件處理程序：響應事件的函數
1.2 事件流機制
事件傳播分為三個階段：
捕獲階段：事件從頂層開始，經過所有祖先節點，直至觸發目標節點
目標階段：事件到達目標節點并觸發
冒泡階段：事件從目標節點開始，經過所有祖先節點，直至頂層Window對象
二、事件綁定方式
2.1 三種綁定方法對比
方法 | 語法 | 添加數量 | 移除方式 | 特點 |
|---|---|---|---|---|
| HTML行內 | onclick="console.log('點擊')" | 1個 | 直接刪除屬性 | 簡單但耦合度高 |
| DOM屬性 | ele.onclick = function(){} | 1個 | ele.onclick = null | 簡單，但只能綁定一個 |
| addEventListener | ele.addEventListener(event, fn, options) | 多個 | removeEventListener() | 推薦，功能最強大 |
2.2 推薦使用 addEventListener
// 添加事件監聽器
element.addEventListener('click', function(event) {console.log('點擊事件');
}, false);
?
// 移除事件監聽器
element.removeEventListener('click', handlerFunction);三、常用事件類型
3.1 鼠標事件
click - 單擊
dblclick - 雙擊
contextmenu - 右鍵菜單
mouseover/mouseout - 鼠標移入/移出（會冒泡）
mouseenter/mouseleave - 鼠標進入/離開（不冒泡）
mousedown/mouseup - 鼠標按下/釋放
mousemove - 鼠標移動
重要區別：
mouseenter/mouseleave不會冒泡，不受子元素影響；mouseover/mouseout會冒泡，受子元素影響。
<script>// click 鼠標點擊// dblclick 鼠標雙擊document.ondblclick = function () {console.log('鼠標雙擊');}// contextmenu 右擊菜單document.oncontextmenu = function () {console.log('右鍵');document.oncontextmenu('.right').style.display = 'block'// 事件原本的功能【阻止默認行為】event.preventDefault()}// mouseover/mouseout 鼠標移入/移出（會冒泡）document.querySelector('.box').onmouseover = function () {console.log('over鼠標滑上去');}document.querySelector('.box').onmouseout = function () {console.log('out鼠標滑出去');}// mouseenter/mouseleave 鼠標移入/移出（不會冒泡）document.querySelector('.box').onmouseenter = function () {console.log('enter鼠標滑走');}document.querySelector('.box').onmouseleave = function () {console.log('leave鼠標滑離開');}// mousedown/mouseup 鼠標按下/釋放document.querySelector('.box').onmousedown = function () {console.log('down鼠標按下');}document.querySelector('.box').onmouseup = function () {console.log('up鼠標釋放');}// mousemove 鼠標移動document.querySelector('.box').onmousemove = function () {console.log('move鼠標移動');}</script>3.2 鍵盤事件
keydown - 鍵盤按下
keyup - 鍵盤彈起
keypress - 按到有效字符
// keydown 鍵盤按下document.onkeydown = function () {console.log('down')}// keyup 鍵盤彈起document.onkeyup = function () {console.log('keyup')}// keypress 按到有效字符document.onkeypress = function (e) {//函數有個參數代表事件的對象console.log('press')console.log(e.key)console.log(e.keyCode)}3.3 表單事件
submit - 表單提交
focus/blur - 獲得/失去焦點
change - 值發生改變
input - 輸入事件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.tip {color: darkgreen;}.err {color: red;}</style>
</head><body><!-- 表單 --><form id="form" action="https://www.baidu.com">用戶名:<input type="text" name="n"><br>密碼:<input type="password" name="p"><br><span class="tip" hidden>請輸入密碼</span><br><span class="err" hidden>密碼不正確</span><br><button id="btn" type="submit">按鈕</button></form><script>form.onsubmit = function (e) {e.preventDefault();//阻止提交}// 輸入document.querySelector('input')[0].oninput = function () {console.log('輸入')}// 獲取焦點，失去焦點 focus/blurdocument.querySelectorAll('input')[1].onfocus = function () {document.querySelector('.tip').hidden = falsedocument.querySelector('.err').hidden = true}document.querySelectorAll('input')[1].onblur = function () {document.querySelector('.tip').hidden = truedocument.querySelector('.err').hidden = false}// change 當值發生改變時觸發document.querySelectorAll('input')[1].onchange = function () {console.log('變了。')}</script><!-- 以下全部適合用change監聽 --><input type="checkbox"><input type="radio"><select name="" id=""></select>
</body></html>
：時間分片（Time Slicing）：讓你的應用在高負載下“永不卡頓”的秘密)
