事件是在編程時系統內發生的動作或發生的事情（單擊、鼠標移動、滾動頁面等）。HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應。JS與HTML之間的交互是通過事件實現的，DOM支持大量的事件。事件的本質是程序各個組成部分之間的一種通信方式，也是異步編程的一種實現。

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

代碼舉例：

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

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

提問1: 點擊了誰?

點擊文字, 算不算點擊兒子；點擊文字, 算不算點擊爸爸；點擊文字, 算不算點擊爺爺

答: 都算

提問2: 調用順序? 點擊文字最先調用fnYe/fnBa/fnEr中的哪一個函數?

IE5調用順序為fnEr->fnBa->fnYe, 網景調用順序為fnYe->fnBa->fnEr

最后W3C制定標準

• 文件名為DOM Level 2 Events Specification
• 規定瀏覽器同時支持兩種調用順序
• 首先按爺爺=>爸爸=>兒子順序看有沒有函數監聽
• 然后按兒子=>爸爸=>爺爺順序看有沒有函數監聽

因此：從外向內找監聽函數，叫事件捕獲

從內向外找監聽函數，叫事件冒泡

DOM事件模型示意圖

addEventListener

事件綁定API

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

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

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

如果bool不傳或為falsy, 則fn使用事件冒泡, 即當瀏覽器在冒泡階段發現baba有監聽函數,就會調用fn并提供事件信息；反之如果bool為true就讓fn走捕獲，即當瀏覽器在捕獲階段發現baba有fn監聽函數,就會調用fn，并提供事件信息。

JS Bin?js.jirengu.com

target和currentTarget

e.target 是用戶操作的元素

e.currentTarget是程序員監聽的元素

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

特例：如果監聽的元素就是用戶點擊的元素，那么誰先監聽就誰先執行

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

用戶點擊的元素就是開發者監聽的

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

請問，f1 先執行還是f2先執行?如果把兩行調換位置后，請問哪個先執行?

正確答案:誰先監聽誰先執行

取消冒泡

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

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

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

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

Cancelable的意思是開發者是否可以取消冒泡

如何阻止滾動？

滾動條是出現在document上面的

• 阻止scroll默認動作沒用，因為先有滾動才有滾動事件
• 要阻止滾動，可阻止wheel和touchstart的默認動作
• 注意你需要找準滾動條所在的元素
• 但是滾動條還能用，可用CSS讓滾動條width: 0

CSS也行

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

自定義事件

瀏覽器自帶事件有100多種

事件參考?developer.mozilla.org

如何自定義一個事件

事件委托

就是委托一個元素幫助監聽本該監聽的元素

場景一：

你要給100個按鈕添加點擊事件，咋辦?

答:監聽這100個按鈕的祖先，等冒泡的時候判斷target是不是這100個按鈕中的一個

JS Bin?js.jirengu.com

場景二

你要監聽目前不存在的元素的點擊事件，咋辦?

答:監聽祖先，等點擊的時候看看是不是我想要監聽的元素即可

優點

• 省監聽數(內存)
• 可以監聽動態元素

封裝事件委托

JS支持事件嗎

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

JS只是調用了DOM提供的addEventListener而已

總結

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

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