瀏覽器事件

事件概述

一般個(gè)人設(shè)備的輸入有：

• 鍵盤
• 鼠標(biāo)
• 觸摸屏

這其中，觸摸屏和鼠標(biāo)又有一定的共性，它們被稱作pointer設(shè)備，所謂pointer設(shè)備，是指它的輸入最終會(huì)被抽象成屏幕上面的一個(gè)點(diǎn)。 現(xiàn)代的UI系統(tǒng)，都源自WIMP系統(tǒng)。WIMP即Window Icon Menu Pointer四個(gè)要素，它最初由施樂公司研發(fā)，后來被微軟和蘋果兩家公司應(yīng)用在了自己的操作系統(tǒng)上

捕獲與冒泡

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

• 事件名稱
• 事件處理函數(shù)
• 捕獲還是冒泡

第三個(gè)參數(shù)不一定是bool值，也可以是個(gè)對(duì)象，它提供了更多選項(xiàng)。

• once：只執(zhí)行一次。
• passive：承諾此事件監(jiān)聽不會(huì)調(diào)用preventDefault，這有助于性能。
• useCapture：是否捕獲（否則冒泡）。

實(shí)際使用，在現(xiàn)代瀏覽器中，還可以不傳第三個(gè)參數(shù)

焦點(diǎn)

焦點(diǎn)系統(tǒng)認(rèn)為整個(gè)UI系統(tǒng)中，有且僅有一個(gè)“聚焦”的元素，所有的鍵盤事件的目標(biāo)元素都是這個(gè)聚焦元素。 瀏覽器API還提供了API來操作焦點(diǎn)

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

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

自定義事件

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

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

這里使用Event構(gòu)造器來創(chuàng)造了一個(gè)新的事件，然后調(diào)用dispatchEvent來在特定元素上觸發(fā)。 我們可以給這個(gè)Event添加自定義屬性、方法。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。