瀏覽器事件

事件概述

一般個人設備的輸入有：

• 鍵盤
• 鼠標
• 觸摸屏

這其中，觸摸屏和鼠標又有一定的共性，它們被稱作pointer設備，所謂pointer設備，是指它的輸入最終會被抽象成屏幕上面的一個點。 現代的UI系統，都源自WIMP系統。WIMP即Window Icon Menu Pointer四個要素，它最初由施樂公司研發，后來被微軟和蘋果兩家公司應用在了自己的操作系統上

捕獲與冒泡

捕獲過程是從外向內，冒泡過程是從內向外。實際上點擊事件來自觸摸屏或者鼠標，鼠標點擊并沒有位置信息，但是一般操作系統會根據位移的累積計算出來，跟觸摸屏一樣，提供一個坐標給瀏覽器。那么，把這個坐標轉換為具體的元素上事件的過程，就是捕獲過程了。而冒泡過程，則是符合人類理解邏輯的：當你按電視機開關時，你也按到了電視機。 捕獲是計算機處理事件的邏輯，而冒泡是人類處理事件的邏輯。 在我們實際監聽事件時，我建議這樣使用冒泡和捕獲機制：默認使用冒泡模式，當開發組件時，遇到需要父元素控制子元素的行為，可以使用捕獲機制。 addEventListener有三個參數：

• 事件名稱
• 事件處理函數
• 捕獲還是冒泡

第三個參數不一定是bool值，也可以是個對象，它提供了更多選項。

• once：只執行一次。
• passive：承諾此事件監聽不會調用preventDefault，這有助于性能。
• useCapture：是否捕獲（否則冒泡）。

實際使用，在現代瀏覽器中，還可以不傳第三個參數

焦點

焦點系統認為整個UI系統中，有且僅有一個“聚焦”的元素，所有的鍵盤事件的目標元素都是這個聚焦元素。 瀏覽器API還提供了API來操作焦點

document.body.focus();document.body.blur();

其實原本鍵盤事件不需要捕獲過程，但是為了跟pointer設備保持一致，也規定了從外向內傳播的捕獲過程。

自定義事件

實際上事件也是一種非常好的代碼架構，但是DOM API中的事件并不能用于普通對象，所以很遺憾，我們只能在DOM元素上使用自定義事件。

var evt = new Event("look", {"bubbles":true, "cancelable":false}); document.dispatchEvent(evt);

這里使用Event構造器來創造了一個新的事件，然后調用dispatchEvent來在特定元素上觸發。 我們可以給這個Event添加自定義屬性、方法。

總結

以上是生活随笔為你收集整理的浏览器事件：为什么会有捕获过程和冒泡过程？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。