事件是在編程時(shí)系統(tǒng)內(nèi)發(fā)生的動作或發(fā)生的事情（單擊、鼠標(biāo)移動、滾動頁面等）。HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應(yīng)。JS與HTML之間的交互是通過事件實(shí)現(xiàn)的，DOM支持大量的事件。事件的本質(zhì)是程序各個組成部分之間的一種通信方式，也是異步編程的一種實(shí)現(xiàn)。

DOM事件模型分三個階段：事件捕獲階段、處于目標(biāo)階段、事件冒泡階段

代碼舉例：

<div class= “爺爺”><div class= “爸爸”><div class= “兒子”></div></div> </div>

即 .爺爺>.爸爸>.兒子，分別添加事件監(jiān)聽 fnYe / fnBa / fnEr

提問1: 點(diǎn)擊了誰?

點(diǎn)擊文字, 算不算點(diǎn)擊兒子；點(diǎn)擊文字, 算不算點(diǎn)擊爸爸；點(diǎn)擊文字, 算不算點(diǎn)擊爺爺

答: 都算

提問2: 調(diào)用順序? 點(diǎn)擊文字最先調(diào)用fnYe/fnBa/fnEr中的哪一個函數(shù)?

IE5調(diào)用順序?yàn)閒nEr->fnBa->fnYe, 網(wǎng)景調(diào)用順序?yàn)閒nYe->fnBa->fnEr

最后W3C制定標(biāo)準(zhǔn)

• 文件名為DOM Level 2 Events Specification
• 規(guī)定瀏覽器同時(shí)支持兩種調(diào)用順序
• 首先按爺爺=>爸爸=>兒子順序看有沒有函數(shù)監(jiān)聽
• 然后按兒子=>爸爸=>爺爺順序看有沒有函數(shù)監(jiān)聽

因此：從外向內(nèi)找監(jiān)聽函數(shù)，叫事件捕獲

從內(nèi)向外找監(jiān)聽函數(shù)，叫事件冒泡

DOM事件模型示意圖

addEventListener

事件綁定API

IE5: baba.attachEvent('onclick', fn)//事件冒泡

網(wǎng)景: baba.addEventListener('click', fn)//事件捕獲

W3C: baba.addEventListener('click', fn, bool),

如果bool不傳或?yàn)閒alsy, 則fn使用事件冒泡, 即當(dāng)瀏覽器在冒泡階段發(fā)現(xiàn)baba有監(jiān)聽函數(shù),就會調(diào)用fn并提供事件信息；反之如果bool為true就讓fn走捕獲，即當(dāng)瀏覽器在捕獲階段發(fā)現(xiàn)baba有fn監(jiān)聽函數(shù),就會調(diào)用fn，并提供事件信息。

JS Bin?js.jirengu.com

target和currentTarget

e.target 是用戶操作的元素

e.currentTarget是程序員監(jiān)聽的元素

例如：div>span{文字}，用戶點(diǎn)擊文字，e.target就是span,e.currentTarget是div

特例：如果監(jiān)聽的元素就是用戶點(diǎn)擊的元素，那么誰先監(jiān)聽就誰先執(zhí)行

只有一個div被監(jiān)聽(不考 慮父子同時(shí)被監(jiān)聽)，fn分別在捕獲階段和冒泡階段監(jiān)聽click事件

用戶點(diǎn)擊的元素就是開發(fā)者監(jiān)聽的

div.addEventLisenter('click', f1) div.addEventLisenter('click', f2, true)

請問，f1 先執(zhí)行還是f2先執(zhí)行?如果把兩行調(diào)換位置后，請問哪個先執(zhí)行?

正確答案:誰先監(jiān)聽誰先執(zhí)行

取消冒泡

捕獲不可取消，但冒泡可以

e.stopPropagation()可中斷冒泡，瀏覽器不再向上走，一般用于封裝獨(dú)立組件

不可取消冒泡：有些事件不可取消冒泡

例如：MDN搜索scroll event,看到Bubbles和Cancelable，Bubbles的意思是該事件是否冒泡

Cancelable的意思是開發(fā)者是否可以取消冒泡

如何阻止?jié)L動？

滾動條是出現(xiàn)在document上面的

• 阻止scroll默認(rèn)動作沒用，因?yàn)橄扔袧L動才有滾動事件
• 要阻止?jié)L動，可阻止wheel和touchstart的默認(rèn)動作
• 注意你需要找準(zhǔn)滾動條所在的元素
• 但是滾動條還能用，可用CSS讓滾動條width: 0

CSS也行

• 使用overflow: hidden可以直接取消滾動條
• 但此時(shí)JS依然可以修改scrollTop

自定義事件

瀏覽器自帶事件有100多種

事件參考?developer.mozilla.org

如何自定義一個事件

事件委托

就是委托一個元素幫助監(jiān)聽本該監(jiān)聽的元素

場景一：

你要給100個按鈕添加點(diǎn)擊事件，咋辦?

答:監(jiān)聽這100個按鈕的祖先，等冒泡的時(shí)候判斷target是不是這100個按鈕中的一個

JS Bin?js.jirengu.com

場景二

你要監(jiān)聽目前不存在的元素的點(diǎn)擊事件，咋辦?

答:監(jiān)聽祖先，等點(diǎn)擊的時(shí)候看看是不是我想要監(jiān)聽的元素即可

優(yōu)點(diǎn)

• 省監(jiān)聽數(shù)(內(nèi)存)
• 可以監(jiān)聽動態(tài)元素

封裝事件委托

JS支持事件嗎

答:支持，也不支持。DOM事件不屬于JS的功能，術(shù)語瀏覽器提供的DOM的功能

JS只是調(diào)用了DOM提供的addEventListener而已

總結(jié)

以上是生活随笔為你收集整理的angular div 滚动条事件_DOM事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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