1. 程式人生 > >Event 物件

Event 物件

1. 事件物件

Event 物件代表事件的狀態,比如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態。

  • 什麼時候會產生Event 物件呢? 
    • 例如: 當用戶單擊某個元素的時候,我們給這個元素註冊的事件就會觸發,該事件的本質就是一個函式,而該函式的形參接收一個event物件.
  • 事件通常與函式結合使用,函式不會在事件發生前被執行!

 

 

target 事件屬性可返回事件的目標節點(觸發該事件的節點),如生成事件的元素、文件或視窗。

語法

event.target

2. 事件流

2.1 事件流發展史

  • 事件發展史,這位大神已經寫好了,想去偷瞄兩眼的請點選這裡

2.2 冒泡

 

  • 什麼是事件冒泡, 
    • 官方的定義就是從最特定的事件目標到最不特定的事件目標

 

意思就是說,假如使用者單擊了一個元素,該元素擁有一個click事件,那麼同樣的事件也將會被它的祖先觸發,這個事件從該元素開始一直冒泡到DOM樹的最上層,這一過程稱為事件冒泡

2.3 捕獲

 

  • 什麼是事件捕獲

 

事件捕獲和事件是相反的,也就是說,當用戶觸發了一個事件的時候,這個事件是從DOM樹的最上層開始觸發一直到捕獲到事件源.

2.4 事件流

 

  • 它的由來

 

由於微軟和網景亂搞,後來必須要為事件傳播機制,制定一個標準,因為事件捕獲是網景公司開發出來的,而事件冒泡是由微軟公司開發出來的,它們都想要自己的技術成為標準,所以導致這兩個公司老是幹架,制定標準的人為了不讓它們幹架,所以研發了事件流.

2.5 事件流的寫法以及實現方式

  • 標準實現方式使用關鍵詞addEventListener
    ,假如你想要給某一個元素新增事件,現在就可以這樣寫element.addEventListener(eventType, fn, false) 
    • dom物件.addEventListener(事件型別, 回撥函式, 事件機制)這裡的事件型別表示你要使用哪種事件型別比如click, 回撥函式裡面寫著觸發此事件你要做什麼事情, 事件機制分為冒泡和捕獲,如果為false表示事件冒泡,為true表示事件捕獲
  • 既然有標準的實現方式,那麼肯定也存在著不和諧的寫法,沒辦法誰讓人家牛逼呢,俗話說的好啊兩虎之爭必有一傷,可傷了我們程式設計師了.這種不和諧的寫法是 
    • dom物件.attachEvent(eventType, fn)第一個引數表示事件型別,第二個是回撥.這種寫法相容IE, IE沒有實現事件捕獲,因為在當時他比較厲害,以為沒必要…………只是,,,,省略一千字, 現在微軟的瀏覽器已經做得很好了… 只是調侃一下無其他意圖..
  • 以上的兩種寫法一種是相容W3C標準的一種是老版IE的寫法