DOM事件流
- 事件捕获：由最外层Document元素到最内层目标元素。
- 到达目标：接收到事件，事件处理为事件冒泡第一阶段。
- 事件冒泡：从最内层目标元素到最外层Document元素。（常用）
事件处理程序
为了响应事件而调用的函数称为事件处理程序（事件监听器）。
使用addEventListener('事件名称'，事件回调)方法指定事件处理程序。
事件对象-event
在DOM发生事件时，所有相关信息都会被收集并存储在event对象中，事件处理程序都会接收到这个参数。
-
type：获取事件类型，此属性只读。
-
bubbles：是否冒泡。
-
eventPhase：事件传导至当前节点时处于什么的状态。
-
target：返回事件真正的触发者。
-
currentTarget：返回事件的监听者(触发的事件绑定到了哪个节点，就返回谁)。
-
stopPropgation()：阻止事件冒泡。
-
preventDefault()：取消事件的默认行为。
-
cancelable:是否可以取消事件的默认行为。为true则无法取消。
-
......
事件类型
用户界面事件
load事件
- 在整个页面加载完毕后触发（包括所有外部资源）。 unload事件
- 文档卸载完成后触发。
- 通常在页面跳转时触发，可用来清理引用，以避免内存泄漏。 resize事件
- 浏览器窗口被缩放到新大小时触发。
- 可以在Window或者
<body>元素上面添加onresize属性来指定事件处理程序。 scroll事件 - 页面中相应元素的变化。
焦点事件
不冒泡版
- 获得焦点-focus
- 失去焦点-blur 冒泡版
- 获得焦点-focusin 通用版
- 失去焦点-focusout
鼠标和滚轮事件
- 。。。。。。
键盘和输入事件
-
keydown-按下按键时触发
-
keyup-抬起按键时触发
-
keypress-按下按键产生字符时触发
事件处理程序中通过event.keyCode获取当前键码。
事件委托
理解：
利用事件冒泡，只使用一个事件处理程序来管理一种类型的事件。
方案：
给所有目标元素的公共祖先节点统一设置一个事件处理程序。
好处：
减少代码冗余，减少页面内存占用，提升整体性能。
- 应该及时删除不用的事件处理程序，以此来释放内存提高性能。
- 被删除的元素上如果有事件处理程序就不会被垃圾回收机制处理。
- 删除操作-例：btn.onclick = null
