JavaScript中幾個重要的知識點（2） ---- DOM事件

JavaScript中幾個最重要的大知識點

1. 面向對象

2. DOM事件

3. 異步交互ajax

事件

事件就是文檔和瀏覽器的瞬間交互行爲

1.事件類型

• 點擊: click

• 滾輪: scroll

• 滑動: move

• 進入: enter

• 加載: load

2.事件機制

• 事件的監聽(事件的綁定)

  • 經過on+事件名 這種類型綁定的事件都叫作DOM0級事件

  • DOM0級事件，同一個元素的同一個事件監聽，綁定的觸發運行函數，不能重複綁定，有且只能綁定一回，下一次綁定的會將上一次的給覆蓋掉

  • 事件設爲null，移除事件的監聽

  • 監聽事件，不只是瀏覽器的一種機制，也是瀏覽器賦予DOM文檔元素的屬性，即事件的監聽是時刻存在的，可是事件觸發時候運行的處理函數，是咱們本身定義的

• 事件的觸發：觸發事件時候運行綁定的處理函數

JS中的事件，實際上是以一個類的形式存在的，每一個綁定的事件其實都是這個類的一個實例 (引用數據類型的對象) ，瀏覽器會給咱們的全部的事件觸發函數中，默認傳入一個實參，就是當前事件的事件對象(event)，在這個事件對象中，保存着當前事件全部信息

事件對象存在於全部的事件的觸發處理函數中，事件對象中有一些經常使用的屬性，用於控制交互中的效果。

• clientX/clientY：鼠標點擊點對應屏幕左上角的位置信息

• pageX/pageY：鼠標點擊的點對應body左上角的位置信息

• keyCode：鍵盤事件中鍵盤對應的鍵盤碼

  • Backspace： keyCode:8 刪除鍵

  • enter： keyCode：13 回車鍵

  • space： keyCode：32 空格鍵

  • arrowLeft/Up/Right/Down： keyCode：37 / 38 / 39 / 40 小鍵盤左 / 上 / 右 / 下

事件對象還存在一些兼容性：在標準瀏覽器下他的事件對象存在於當前函數的做用域中，而在ie中存在於window做用域下。

//處理事件對象的兼容性寫法
event=event|| window.event;

//處理事件源的兼容性寫法
event.target || event.srcElement

//處理事件冒泡的兼容性寫法
event.stopPropagation() || event.cancelBubble=true;

//阻止默認行爲的兼容寫法
event.preventDefault() || event.returnValue=false;

3.事件委託的思想

有時候咱們須要對一個DOM元素下的多個子元素綁定相同的事件，好比說爲表格添加可刪除一行的功能，通常的方法是循環綁定事件，可是這樣的辦法顯然性能不高，這時候就能夠只爲其父元素綁定事件，經過事件委託來實現其多個子元素的相同事件效果。

事件委託的原理爲：根據事件流的傳播機制，咱們在父級標籤上監聽事件，經過捕獲和冒泡機制，在觸發子集的事件的時候，冒泡傳播給父級，來觸發父級的事件處理函數

那麼什麼是事件得出傳播機制呢？總的來講能夠把事件流的傳播機制分爲兩到三個階段：

1. 事件捕獲階段：從DOM最外層標籤HTML開始往子元素捕獲事件源

2. 捕獲到事件對象（能夠歸到第一階段）

3. 冒泡傳播：從捕獲到事件源的元素開始往父級元素進行事件冒泡，DOM0級事件中，事件綁定函數的觸發都發生在冒泡階段

DOM2級事件

DOM2級事件就是DOM0級事件的優化，同一個文檔對象同一個事件，能夠綁定多個事件處理程序，還能夠控制事件處理程序的執行階段在捕獲或者冒泡階段執行。

1.在標準瀏覽器中，綁定DOM2級事件的方法爲：addEventListener()

• 第一個參數爲事件類型：[String] click / mouseover / blur ...

• 第二個參數爲事件處理函數：[Function] listener

• 第三個參數爲事件處理函數是否在冒泡階段執行：[Boolean] ture/false

若是直接觸發的是事件源的監聽事件，沒有事件委託的狀況下，則冒泡和捕獲會同時發生，此時會根據函數的書寫前後順序執行事件處理程序

事件綁定函數中的this指向當前綁定事件的DOM對象，this還等於currentTarget。
使用 removeEventListener() 來移除事件，參數必須與要移除的事件處理函數地址指針相同。

2.在低版本IE瀏覽器（6-8）中，綁定DOM2級事件的方法爲：attachEvent()

IE中的DOM2級事件的事件處理程序,都是在冒泡階段執行的。

• 第一個參數爲事件類型：[String] onclick / onmouseover / onblur ...

• 第二個參數爲事件處理程序：：[Function] listener

IE下DOM2級事件的處理函數是綁定在全局(window)下,因此其內部this指向window，IE下DOM二級事件還存在重複執行屢次相同的處理函數和函數執行亂序的問題，能夠用 訂閱 - 發佈 模式解決這些兼容性問題。使用detachEvent()來移除事件，參數一樣必須與要移除的事件地址指針相同