1. 認(rèn)識(shí)事件
Web頁(yè)面需要經(jīng)常和用戶之間進(jìn)行交互，而交互的過(guò)程中我們可能想要捕捉這個(gè)交互的過(guò)程：
監(jiān)聽(tīng)事件
- 事件監(jiān)聽(tīng)方式一：在script中直接監(jiān)聽(tīng)（很少使用）；
- 事件監(jiān)聽(tīng)方式二：DOM屬性，通過(guò)元素的on來(lái)監(jiān)聽(tīng)事件；
- 事件監(jiān)聽(tīng)方式三：通過(guò)EventTarget中的addEventListener來(lái)監(jiān)聽(tīng)骑脱；
2. 常見(jiàn)的事件列表
-
鼠標(biāo)事件：
- click —— 當(dāng)鼠標(biāo)點(diǎn)擊一個(gè)元素時(shí)（觸摸屏設(shè)備會(huì)在點(diǎn)擊時(shí)生成）。
- mouseover / mouseout —— 當(dāng)鼠標(biāo)指針移入/離開(kāi)一個(gè)元素時(shí)苍糠。
- mousedown / mouseup —— 當(dāng)在元素上按下/釋放鼠標(biāo)按鈕時(shí)叁丧。
- mousemove —— 當(dāng)鼠標(biāo)移動(dòng)時(shí)。
-
鍵盤(pán)事件：
- keydown 和 keyup —— 當(dāng)按下和松開(kāi)一個(gè)按鍵時(shí)岳瞭。
-
表單（form）元素事件：
- submit —— 當(dāng)訪問(wèn)者提交了一個(gè) <form> 時(shí)拥娄。
- focus —— 當(dāng)訪問(wèn)者聚焦于一個(gè)元素時(shí)，例如聚焦于一個(gè) <input>瞳筏。
-
Document 事件：
- DOMContentLoaded —— 當(dāng) HTML 的加載和處理均完成稚瘾，DOM 被完全構(gòu)建完成時(shí)。
-
CSS 事件：
- transitionend —— 當(dāng)一個(gè) CSS 動(dòng)畫(huà)完成時(shí)姚炕。
3. 事件流
為什么會(huì)產(chǎn)生事件流呢摊欠？
當(dāng)我們?cè)跒g覽器上對(duì)著一個(gè)元素點(diǎn)擊時(shí)，你點(diǎn)擊的不僅僅是這個(gè)元素本身柱宦；
因?yàn)槲覀兊腍TML元素是存在父子元素疊加層級(jí)的些椒；
事件冒泡和事件捕獲
從最內(nèi)層的元素向外依次傳遞的順序，稱之為事件冒泡（Event Bubble）;
是從外層到內(nèi)層（body -> span）掸刊，這種稱之為事件捕獲（Event Capture）
開(kāi)發(fā)中通常會(huì)使用事件冒泡(默認(rèn))
// 監(jiān)聽(tīng)捕獲 第三個(gè)參數(shù)設(shè)置成true
El.addEventLinstener("event", fn, true)
4. 事件對(duì)象
比如事件的類型是什么免糕，你點(diǎn)擊的是哪一個(gè)元素，點(diǎn)擊的位置是哪里等等相關(guān)的信息忧侧；
那么這些信息會(huì)被封裝到一個(gè)Event對(duì)象中说墨，這個(gè)對(duì)象由瀏覽器創(chuàng)建，稱之為event對(duì)象苍柏；
獲取這個(gè)event對(duì)象
event對(duì)象會(huì)在傳入的事件處理（event handler）函數(shù)回調(diào)時(shí)，被系統(tǒng)傳入姜贡；
我們可以在回調(diào)函數(shù)中拿到這個(gè)event對(duì)象试吁；
對(duì)象的常見(jiàn)屬性
- type：事件的類型；
- target：當(dāng)前事件發(fā)生的元素楼咳；
- currentTarget：當(dāng)前處理事件的元素熄捍；
- eventPhase：事件所處的階段；
- offsetX母怜、offsetY：事件發(fā)生在元素內(nèi)的位置余耽；
- clientX、clientY：事件發(fā)生在客戶端內(nèi)的位置苹熏；
- pageX碟贾、pageY：事件發(fā)生在客戶端相對(duì)于document的位置币喧；
- screenX、screenY：事件發(fā)生相對(duì)于屏幕的位置袱耽；
對(duì)象的常見(jiàn)方法
- preventDefault：取消事件的默認(rèn)行為杀餐；
- stopPropagation：阻止事件的進(jìn)一步傳遞（冒泡或者捕獲都可以阻止）；
事件處理中的this
在函數(shù)中朱巨，我們也可以通過(guò)this來(lái)獲取當(dāng)前的發(fā)生元素：
這是因?yàn)樵跒g覽器內(nèi)部史翘，調(diào)用event handler是綁定到當(dāng)前的target上的
5. EventTarget類
所有的節(jié)點(diǎn)、元素都繼承自EventTarget
EventTarget常見(jiàn)的方法：
- addEventListener：注冊(cè)某個(gè)事件類型以及事件處理函數(shù)冀续；
- removeEventListener：移除某個(gè)事件類型以及事件處理函數(shù)琼讽；
var btnEl = document.querySelector("button")
var foo = function () {
console.log("監(jiān)聽(tīng)到按鈕的點(diǎn)擊")
}
btnEl.addEventListener("click", foo)
setTimeout(function () {
console.log("將事件監(jiān)聽(tīng)移除掉")
btnEl.removeEventListener("click", foo)
}, 5000)
- dispatchEvent：派發(fā)某個(gè)事件類型到EventTarget上；
window.addEventListener("wsw", function () {
console.log("啦啦啦啦啦啦收到消息啦")
})
setTimeout(() => {
window.dispatchEvent(new Event("wsw"))
}, 5000);
6. 事件委托
因?yàn)楫?dāng)子元素被點(diǎn)擊時(shí)洪唐，父元素可以通過(guò)冒泡可以監(jiān)聽(tīng)到子元素的點(diǎn)擊钻蹬；
并且可以通過(guò)event.target獲取到當(dāng)前監(jiān)聽(tīng)的元素；
