WebAPI程式設計（2）——事件進階

事件進階

1、注冊事件

1.傳統注冊方式

• 利用on開頭的事件onclick
• 特點：注冊事件的唯一性
• 同一個元素同一個事件隻能設定一個處理函數，最後注冊的處理函數會覆寫前面注冊的處理函數

2.方法監聽注冊方式

• eventTarget.addEventListener( ‘type’，listener[，useCapture])：将指定的監聽器注冊到eventTarget（目标對象）上，當該對象觸發指定的事件時，就會執行事件處理函數。

  – tyle：事件類型字元串，比如click、mouseover，不帶on

  – listener：事件處理函數，事件發生時，會調用該監聽函數

  – useCapture：可選參數，是一個布爾值，預設為false

• IE9之前的IE不支援此方法，可使用att achEvevt()代替
• 特點：同一個元素同一個事件可以注冊多個監聽器，按照注冊順序依次執行

2、删除事件

1. 傳統方式删除事件

   eventTarget.onclick = null;

2. 方法監聽注冊方式删除事件

   – eventTarget.removeEventListener( type，listenser[，useCapture]);

   – eventTarget.detachEvent( eventNameWithOn，callback);

3、DOM事件流

事件流描述的是從頁面中接收事件的順序。

事件發生時會在元素節點之間按照特定的順序傳播，這個傳播過程即DOM事件流。

DOM事件流分為3個階段：

1. 捕獲階段：由DOM最頂層節點開始，然後逐級向下傳播到最具體的元素接收的過程。
2. 目前目标階段
3. 冒泡階段：事件開始時由最具體的元素接收，然後逐級向上傳播到DOM最頂層節點的過程

注意：

1. JS代碼中隻能執行捕獲或者冒泡其中的一個階段；
2. onclick 和 attachEvent 隻能得到冒泡階段；

3. addEventListener( type，listener，[useCapture])

   第三個參數如果是 true ，表示在事件捕獲階段調用事件處理程式；

   如果是 false，表示在事件冒泡階段調用事件處理程式；

4. 有些事件是沒有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave

4、事件對象

1. 什麼是事件對象

   eventTarget.onclick = function(event) {}

   eventTarget.addEventListener(‘click’，function(event) {} )

   這裡的 event 就是事件對象

官方解釋：事件對象代表事件的狀态，比如鍵盤按鍵的狀态、滑鼠的位置、滑鼠按鈕的狀态。

簡單了解：事件發生後，跟事件相關的一系列資訊資料的集合都放到這個對象裡面，這個對象就是事件對象event，由很多屬性和方法。

1. 事件對象的使用文法

   eventTarget.onclick = function(event) {}

   eventTarget.addEventListener(‘click’，function(event) {} )

   event 是形參，系統自動設定為事件對象，不需要傳遞實參

2. 事件對象的常見屬性和方法

• e.target——傳回觸發事件的對象
• e.srcElement——傳回觸發事件的對象，ie6-8使用
• e.type——傳回事件的類型
• e.cancelBubble——該屬性阻止冒泡，ie6-8使用
• e.returnValue——阻止預設事件，ie6-8使用
• e.preventDefault()——阻止預設事件
• e.stopPropagation()——阻止冒泡

5、事件委托（代理、委派）

• 事件委托也稱為事件代理
• 原理：不是為每個子節點單獨設定事件監聽器，而是設定在其父節點上，然後利用冒泡原理影響設定每個子節點。
• 作用：隻操作了一次DOM，提高了程式的性能。

6、常用的滑鼠事件

• onclick——滑鼠點選左鍵觸發
• onmouseover——滑鼠經過觸發
• onmouseout——滑鼠離開觸發
• onfocus——獲得滑鼠焦點觸發
• onblur——失去滑鼠焦點觸發
• onmousemove——滑鼠移動觸發
• onmouseup——滑鼠彈起觸發
• onmousedown——滑鼠按下觸發
• contextmenu——禁用右鍵菜單
• selectstart——禁止選中文字

滑鼠事件對象：

• e.clientX——傳回滑鼠相對于浏覽器視窗可視化的X坐标
• e.clientY——傳回滑鼠相對于浏覽器視窗可視化的Y坐标
• e.pageX——傳回滑鼠相對于文檔頁面的X坐标
• e.pageY——傳回滑鼠相對于文檔頁面的Y坐标
• e.screenX——傳回滑鼠相對于電腦螢幕的X坐标
• e.screenY——傳回滑鼠相對于電腦螢幕的Y坐标

7、常用的鍵盤事件

1. 常用鍵盤事件

   onkeyup——鍵盤按鍵被松開時觸發

   onkeydown——鍵盤按鍵被按下時觸發

   onkeypress——鍵盤按鍵被按下時觸發

2. 鍵盤事件對象

   keyCode——傳回該鍵的ASCII 值，能區分大小寫

注意：

1. 如果使用 addEventListener 不需要加 on
2. onkeypress 不識别功能鍵，比如左右箭頭，shift等
3. onkeydown 和 onkeyup 不區分字母大小寫，onkeypress 區分字母大小寫
4. 三個事件的執行順序是：keydown–>keypress–>keyup