# DOM 事件 - 事件流 - 事件注冊 - 事件對象 - 事件分類 - 事件代理 ## dom事件流 dom事件流就是對dom事件的處理過程 - capture phase (捕獲，向下捕獲，直到捕獲到觸發事件節點的父元素) - target phase（事件觸發過程） - bubble phase（冒泡過程，觸發事件節點的父元素直到頂層window） ## 事件注冊與觸發 - 事件注冊 - 取消事件注冊 - 事件觸發 事件注冊 - eventTarget.addEventListener(type, listener[, useCapture]) - elem.onclick = fun 取消事件注冊 - eventTarget.removeEventListener(type, listener[, useCapture]) - elem.onclick = null 事件觸發 - eventaTarget.dispatchEvent(type) ## 事件對象 event對象 - 屬性 - type（事件類型） - target（srcElement, 觸發的節點） - currentTraget（當前處理事件的節點） - 方法 - stopPropagation（阻止冒泡） - preventDefault（阻止默認行為） - stopImmediatePropagation（阻止冒泡，阻止后續事件） target在事件流的目標階段；currentTarget在事件流的捕獲，目標及冒泡階段。只有當事件流處在目標階段的時候，兩個的指向才是一樣的， 而當處于捕獲和冒泡階段的時候，target指向被單擊的對象而currentTarget指向當前事件活動的對象（一般為父級）。 ## 事件分類 DOM事件分類及繼承關系；鼠標事件類型、鼠標事件對象、鼠標事件舉例；鍵盤、輸入、焦點事件類型、事件對象、事件舉例；其他常用事件  event（基本事件）  window - load - unload - error - abort Image - load - error - abort ``` html <image alt="photo" src="http://foo" onerror="this.src='http://bar'" /> ``` UIEvent  MouseEvent  MouseEvent對象 - 屬性 - clientX，clientY - screenX，screenY - ctrlKey, shiftKey, altKey, metaKey - button(0,1,2) MouseEvent順序   WheelEvent  WheelEvent對象 - 屬性 - deltaMode - deltaX - deltaY - delatZ ## FocusEvent | 事件類型| 是否冒泡 | 元素| 默認事件| 元素例子| | ------ | ------| ------ | ------ | ------ | | blur| NO| Window, Element|None|window, input| | focus| NO| Window, Element|None|window, input| | foucusin| NO| Window, Element|None|window, input| | focusout| NO| Window, Element|None|window, input| 屬性 - relatedTarget(返回當前事件涉及到的其他DOM元素) ## InputEvent | 事件類型| 是否冒泡 | 元素| 默認事件| 元素例子| | ------ | ------| ------ | ------ | ------ | | beforeinput| YES| Element|update DOM Element|input| | input| YES| Element|None |input| ## keyboardEvent | 事件類型| 是否冒泡 | 元素| 默認事件| 元素例子| | ------ | ------| ------ | ------ | ------ | | keydown| YES| Element|beforeinput/input focus/blur activation|div,input| | keyup| None| Element|None |div,input| 屬性 - key - code - ctrlKey, shiftKey, altKey, metaKey - repeat（持續按一個鍵） - keyCode - charCode - which ## 事件代理 將事件注冊到元素的父節點上 ``` html <ul> <li></li> <li></li> <li></li> </ul> ```