JavaScript 學習筆記9

第十三章

1.事件流

JavaScript和html的交互經過事件來實現

事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。

DOM2事件流：事件捕獲階段——>處於目標階段——>事件冒泡階段

                         事件捕獲：不太具體的節點應該更早的收受事件，用意在於事件到達預約元素以前捕獲它。

                         處於目標階段：節點接收到事件並處理

                         事件冒泡階段：由最具體的元素接受，逐級向上傳播

2.事件處理程序：響應某個事件的函數

事件處理程序的名字以「on」開頭

a.HTML事件處理程序

經過和相應事件處理程序同名的HTML特性來指定。

問題——時差問題，經常使用try-catch封裝解決

                擴展做用域鏈在不一樣瀏覽器會致使不一樣結果

               HTML和JavaScript代碼緊密耦合

b.DOM0級事件處理程序

講一個函數賦值給一個事件處理程序屬性

這時候的事件處理程序是在元素的做用域中運行，程序中的this引用當前元素

btn.onclick=null； //刪除事件處理程序

c.DOM2級事件處理程序

制定和刪除事件處理程序向的操做：addEventListener（）和removeEventListener（）

參數：要處理的事件名，做爲事件處理程序的函數click，布爾值（FALSE——在冒泡階段調用）

好處：能夠添加多個事件處理程序，按照添加順序觸發

d.IE事件處理程序

attachEvent（），detachEvent（），參數：事件處理程序名稱onclick，事件處理程序函數

事件處理程序會在全局做用域中運行

好處：能夠添加多個事件處理程序，按照相反的順序觸發

f.使用能力檢測的跨瀏覽器的事件處理程序

3.事件對象

在觸發DOM上的某個事件時會產生一個事件對象event，這個對象包含全部與事件有關的信息

a.DOM中的事件對象

不管DOM0orDOM2，都會闖入event對象

在對象內部，對象this始終等於currentTarget的值，而target則只包含事件的實際目標

1）須要一個函數處理多個事件時，但是使用swich（event.type）——case

2）preventDefault（）——阻止特定事件的默認行爲

3）stopPropagation（）——用於當即中止事件在DOM層次的傳播，取消進一步的事件冒泡或捕獲

4.)eventPhase屬性，用於肯定事件階段：1.捕獲階段2.處於目標3.事件冒泡

b.IE中的事件對象

DOM0方式添加事件，event對象做爲window對象的一個屬性存在

使用attachEvent（）添加，就會有一個event對象做爲參數被傳入事件處理程序中

經過HTML特性指定的事件，能夠經過一個event變量來訪問event對象

屬性/方法：cancelBubble——true，取消事件冒泡

                     returnValue——設置爲FALSE，取消事件的默認行爲

                   srcElement——事件的目標

                    type——事件的類型

4.事件類型

a.UI事件

指不必定與用戶操做有關的事件

load 和 unload ：當頁面徹底加載/卸載後再window上觸發

.                              兩種定義onload事件處理程序的方式

                                 ——a.EventUtil.addHandle(window，「load」，function（）{})；

                                         b.爲body元素添加一個onload特性

resize：當瀏覽器窗口被調整到一個新的高度或寬度時觸發，在window上觸發

scroll：在window對象上發生，實際表示的是頁面中相應元素的變化

b.焦點事件:在頁面元素得到或失去焦點時觸發

blur/focus:在元素失去/得到焦點時觸發。不會冒泡，全部瀏覽器都支持

IE:focusin,focusout,被DOM3級事件採納爲標準方式

c.鼠標和滾輪事件

mousedown，mouseup，click，dblclick，mouseover，mouseout

客戶區座標位置：clientX和clientY

頁面座標位置：知道鼠標是在視口的什麼位置發生的，pageX和pageY

屏幕座標位置：screenX，screenY，鼠標指針相對於整個屏幕的座標信息

d.修改鍵

DOM規定了4個屬性，表示修改鍵的狀態，shiftKey，ctrlKey，altKey，metaKey，屬性包含布爾值，true表示按下

e.相關元素

mouseover（移入），mouseout（移出）

f.鼠標按鈕

對mousedown和mouseup，其event對象存在一個button屬性，三個值：0——主鼠標1——滾輪按鈕

2——次鼠標按鈕

g.更多的事件信息

DOM2：event對象還提供了detail屬性，用於給出有關事件的更多信息，detail包含一個數值，表示在給定位置發生了多少次單擊

h.滾輪事件——mousewheel

4.4鍵盤和文本事件

鍵盤事件：keydown/keyup：當用戶按下/釋放鍵盤上任意鍵觸發

                keypress：當用戶按下鍵盤上的字符鍵觸發， 

文本事件：textInput——在可編輯區域輸入文本時觸發 ，它的event對象還包含一個data屬性和inputMethod屬性

鍵碼：event對象的keyCode屬性中會包含一個代碼，與鍵盤上一個特定的見相對應

字符編碼：event對象都支持一個charCode屬性

4.6變更事件

在DOM中的某一部分發生變化時給出提示

a刪除節點

首先會觸發DOMNodeRemoved事件，這個事件的目標（event.target）是被刪除的節點，event.relatedNode屬性包含着對目標節點父節點的引用

若是被移除的節點包含子節點，那麼在其全部子節點以及這個被移除的節點上回相繼觸發DOMNodeRemovedFromDocument事件

其後，DOMSubtreeModified事件——在DOM結構中發生任何變化時觸發，event.target爲被移除節點的父節點

b插入節點

首先觸發DOMNodeInserted事件，接着DOMNodeInsertedIntoDocument，最後，SOMSubtreeModified

4.7HTML5事件

1.contextmenu，即經過單擊鼠標右鍵能夠調出上下文菜單

事件目標是發生用戶操做的元素，在全部瀏覽器中又能夠取消這個事件：

兼容DOM的瀏覽器：event.preventDefault（），IE：event.returnValue值設置爲false