js高程筆記13章

第13章 事件

1.事件流：描述從頁面中接收事件的順序。

　　三個階段：捕獲，處於目標，冒泡。

2.事件處理程序：局部變量event表示事件對象，this值爲事件目標元素。

　　(1)HTML事件處理程序：能夠訪問特性。弊端：可能調用事件處理程序時，函數還未定義。同時代碼緊密耦合，修改不便。

　　(2)DOM0級事件處理程序：this引用當前元素。弊端：一個元素只能添加一個事件處理程序。

　　(3)DOM2級事件處理程序：addEventListener()和removeEventListener()。沒法移除匿名函數。IE9.0+支持該方法。

3.事件對象：在事件處理程序中傳入的event

　　this始終等於currentTarget，表示事件的註冊元素。target等於實際觸發的目標

　　阻止事件默認行爲：event.preventDefault()，前提：event.cancelable屬性爲true。

　　中止冒泡：event.stopPropagation()

　　肯定事件流階段：event.eventPhase

4.事件類型：

　　UI事件：load，當頁面徹底加載（全部圖像、js、css）後觸發。<img><script>標籤也能夠觸發。

　　　　　　unload，當文檔被徹底卸載後觸發。用來清除引用，避免內存泄漏。

　　　　　　resize，瀏覽器窗口被調整寬高度時觸發

　　　　　　scroll，在文檔滾動期間重複被觸發。

　　焦點事件：focus和blur（不冒泡），focusin和focusout（冒泡）

　　鼠標事件：click（只有它能夠經過鍵盤觸發），dbclick，mousedown，mouseup，mouseover，mousemove，mouseout

　　　　event座標位置屬性：clientX和clientY，pageX和pageY，screenX和screenY

　　　　event修改件屬性：shiftKey，ctrlKey，altKey，metaKey，相應鍵按下返回true

　　　　event相關元素屬性：relatedTarget，對於mouseover，mouseout事件指定相關元素。

　　　　event鼠標按鈕屬性：button

　　　　event更多事件屬性：detail，P375

　　滾輪事件：mousewheel

　　無障礙性問題：不要經過onmousedown代替onclick，由於屏幕閱讀器沒法觸發onmousedown

　　　　　　　　　不要使用onmouseover向用戶展現新選項

　　　　　　　　　不要使用dbclick執行重要操做。

　　鍵盤與文本事件：keydown，keypress，keyup，textInput

　　　　event鍵碼屬性：keyCode，charCode

　　複合事件：

　　變更事件：刪除節點，插入節點

　　HTML5事件：contextmenu事件，右鍵單擊出現上下文菜單時觸發。

　　　　　　　　 beforeunload事件，頁面卸載前觸發。

　　　　　　　　 DOMContentLoaded事件，跟load對比，造成DOM樹後就觸發，無論圖像,js,css

　　　　　　　　 readystatechange事件，提供文檔或元素加載狀態信息

　　　　　　　　 pageshow和pagehide事件

　　　　　　　　 haschange事件

5.內存和性能：利用好事件處理程序，避免事件處理程序過多。

　　事件委託：利用事件冒泡，只指定一個事件處理程序，管理一類型的全部事件。利用event.target進行區分。

　　移除事件處理程序：在不須要時移除事件處理程序，（1）在綁定事件的標籤被替換或者刪除前，（2）在頁面卸載前，用onunload

6.模擬事件：用js模擬一個事件行爲的發送。

　　建立事件：createEvent()

　　初始化事件：initMouseEvent()鼠標事件，initKeyboardEvent()鍵盤事件

　　觸發事件：元素.dispatchEvent()

　　自定義事件：document.createEvent("CustomEvent").initCustomEvent("自定義事件名稱")