DOM_Event Flow

Event事件對象,DOM2級方法

例子：
<div> <button id="btn">Click Me!</button> </div>

對於上面例子，若是想知道點擊後例子的運行順序，此時就與Event flow(事件流動)相關了。

事件流動

DOM事件不僅僅只會在一個Element上觸發，它還會流向其餘Element。事件的流動一般會經歷這麼三個階段：

捕獲階段 -> 目標階段 -> 冒泡階段

捕獲階段（capture phase）

定義：事件對象在事件目標的祖先中上到下順向傳播，從最頂層的defaultView到事件目標的（直系）父元素。

 

捕獲階段發生在整個事件流動的開始。在這階段裏事件會從父（主幹）到子（分支）由上往下傳播，被元素一層層地捕獲。
文章開頭的例子裏面，捕獲階段的click事件會依次在document、body、div上觸發：

 

目標階段（target phase）

定義：事件對象到達事件目標。

 

就如例子中，事件在button上觸發。

若是事件是不可冒泡的，那整個事件流動會到此爲止，不會發生下面的冒泡階段。

 

冒泡階段（bubble phase）

定義：事件對象會在事件目標的祖先元素裏反向傳播，由開始的父元素到最後的defaultView（document）。

 

冒泡階段發生在最後，這也是咱們最爲熟悉的一個階段。在這階段裏事件會從子（分支）到父（主幹）逆向傳播，看起來像是一個水裏的泡泡往上冒。
例子裏面，冒泡階段的click事件會依次在div、body、document上觸發：

一.event事件對象

• 每一個瀏覽器中的event 
  鼠標座標獲取
• event.pageX / event.pageY相對於文檔頂部,不兼容低版本IE
• event.clientX / event.clientY相對於但是區域

二.事件監聽

• attachEvent()IE8極其一下添加監聽事件
• addEventListener()大衆瀏覽器添加監聽事件

• 事件綁定 
  1) 在DOM元素中直接綁定

  <input onclick =  "alert('謝謝支持')" type="button" value="彈出警告"/>
  <input onclick = "fun()" type="button" value="警告">
  function fun(){
  alert("警告");
  }

  2)在javascript代碼中綁定 
  就是一個對象的事件函數 
  3)綁定事件監聽函數 
  就是上面兩個方法來綁定事件監聽函數

• 事件解綁
• 事件捕獲 
  當鼠標點擊或者觸發dom事件時,瀏覽器會從根節點開始有外到內進行事件傳播,即點擊子元素,若是父元素經過事件捕獲方式註冊了對應的事件的話,會觸發父元素綁定事件
• 事件冒泡 
  與事件捕獲相反,事件冒泡順序是由內到外進行事件傳播,直到根節點.

三.滾輪事件

• wheelDelta正常記錄滾動方向
• detail火狐瀏覽器記錄滾動條方向
• onmousewheel滾輪滾動

四.事件冒泡

• onmouseover / onmouseout
• onmouseenter / onmouseleave不支持冒泡
• 表格操做點擊
• cancelBubble從自身開始阻止冒泡
• stopPropagation()阻止冒泡

五.鍵盤事件

• keyCode
• onkeydown
• onkeypress
• onkeyup
• altKey
• ctrlKey
• shiftKey
• which等

六.阻止瀏覽器默認事件

• preventDefault
• returnValue = false
• 屏蔽瀏覽的右鍵菜單
• 進制選中複製