說明
每天10分鐘，重構你的前端知識體系專欄筆記。
一、介紹
這一篇主要學習一下浏覽器部分的事件。
二、事件概述
2.1、pointer 裝置
所謂 pointer 裝置，是指它的輸入最終會被抽象成螢幕上面的一個點。比如觸摸屏和滑鼠。
2.2、WIMP 系統
現代的 UI 系統，都源自 WIMP 系統。WIMP 即 Window Icon Menu Pointer 四個要素，它最初由施樂公司研發，後來被微軟和蘋果兩家公司應用在了自己的作業系統上。
三、捕獲與冒泡
3.1、簡述
實際上滑鼠點選時并沒有位置資訊，但是一般作業系統會根據位移的累積計算出來，跟觸摸屏一樣，提供一個坐标給浏覽器。把這個坐标轉換為具體的元素上事件的過程，就是捕獲過程。而冒泡過程，則是符合人類了解邏輯的：比如你摸了我的手時，你也摸了我到了我這個人。可以認為，捕獲是計算機處理事件的邏輯，而冒泡是人類處理事件的邏輯。
3.2、事件傳播順序
在一個事件發生時，捕獲過程跟冒泡過程總是先後發生，跟你是否監聽毫無關聯。
<body>
<input id="i"/>
</body> document.body.addEventListener("click", () => {
console.log(1)
}, true)
document.getElementById("i").addEventListener("click", () => {
console.log(2)
}, true)
document.body.addEventListener("click", () => {
console.log(3)
}, false)
document.getElementById("i").addEventListener("click", () => {
console.log(4)
}, false)
// 輸出順序
1 2 4 3 3.3、監聽事件 API
addEventListener
1、事件處理函數不一定是函數
// 具有 handleEvent 方法的對象
var o = {
handleEvent: event => console.log(event)
}
document.body.addEventListener("keydown", o, false); 2、第三個值可以是個對象，它提供了更多選項
- once：隻執行一次。
- passive：承諾此事件監聽不會調用 preventDefault，這有助于性能。
- useCapture：是否捕獲（否則冒泡）。
四、焦點
4.1、鍵盤事件
鍵盤事件是由焦點系統控制的，一般來說，作業系統也會提供一套焦點系統，但是現代浏覽器一般都選擇在自己的系統内覆寫原本的焦點系統。
1、焦點系統認為整個 UI 系統中，有且僅有一個“聚焦”的元素，所有的鍵盤事件的目标元素都是這個聚焦元素。
2、Tab 鍵被用來切換到下一個可聚焦的元素，焦點系統占用了 Tab 鍵，但是可以用 JavaScript 來阻止這個行為。
3、浏覽器 API 還提供了 API 來操作焦點，如：
document.body.focus();
document.body.blur(); 五、自定義事件
var event = new Event('build');
// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);
// Dispatch the event.
elem.dispatchEvent(event); ![推薦一款好用的浏覽器Yandex[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)