# 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> ```