元素的事件：某元素发生了一件事
事件处理程序：事件发生后，需要执行的函数
事件流模型：捕获阶段->目标阶段->冒泡阶段
1.注册事件：把元素的事件和事情处理程序关联起来
DOM 0(非标）的事件注册：DOM对象.on事件名称=func
（赋值操作仅能注册一个，且没有事件流模型只能在冒泡阶段）
DOM2(2000 定义了事件流模型，统一了事件传播机制)：
DOM对象.addEventListener（事件名称，事件处理函数，boolean(是否在捕获阶段触发，默认false)）
第三个参数可以是对象，除了是否捕获阶段触发外（capture:true），还可以多一个配置 once:true（只触发一次）
移除事件：DOM对象.removeEventListener（事件名称，事件处理函数，boolean(是否在捕获阶段触发，默认false)）事件移除的事件处理函数必须是具名函数，匿名函数的话即便函数体一样，也不是指向同一个函数
2.事件对象：
当一个事件触发时，浏览器会创建一个与该事件相关的事件对象，该对象包含大量有用信息，比如事件的类型，触发的元素，鼠标的坐标等等
事件对象会作为参数传递给事件处理函数，编写事件处理函数可以通过这个对象，了解事件的详细信息，并执行更精确的操作
常用的事件对象成员:
target:事件源,触发事件的元素（无论事件是注册给谁的，target一定是目标阶段的事件源（比如父元素注册事件，子元素无事件注册，点击子元素，点击事件冒泡到父元素，触发父元素事件，target仍旧是指向子元素））
事件委托：由于时间冒泡且target永远是触发元素的事件，因此给父元素注册事件，通过判断target不同来源，分别设置不同的事件处理程序，称为事件委托。
currentTarget：绑定事件的元素（this）
type：事件类型
常用的事件对象方法:
preventDafault()：阻止浏览器默认行为（dom1阻止a元素默认跳转：return fasle/href="javascript:void 0"）
stopPropagation()：阻止事件冒泡
eventPhase()：获取事件所处阶段，参数123，对应捕获、目标和冒泡
3.事件类型：
- 鼠标事件:
click：单击鼠标主键（左键）/聚焦时按下回车键
dblclick、mousedown、mouseup、mousemove、mouseover和mouseout
mouseEvent（鼠标事件对象）对象成员:
点击：
altKey：事件触发时，是否按下了键盘的alt键
ctrlKey、shiftKey、metaKey
button:012对应鼠标左中右键
位置：
pageX,pageY:当前鼠标相对于整个文档的xy坐标
clientX,clientY:当前鼠标相对于视口的xy坐标
offsetX,offsetY:当前鼠标相对于事件源内填充边的xy坐标（针对的是事件源）
screenX,screenY:当前鼠标相对于屏幕的xy坐标
movementX,movementY:只在鼠标移动事件中有效，表示当前鼠标相对于上一次鼠标位置的xy偏移坐标
- 键盘事件：
keydown:按下键盘任意键触发，按住不放会重复触发
keyup、keypress
keyboardEvent(键盘事件对象）对象成员：
altKey：事件触发时，是否按下了键盘的alt键
ctrlKey、shiftKey、metaKey
key,code：返回按键的字符串
code记录按键，适配键盘布局（不管大小写）
key可以得到打印字符（可以区分大小写）
- 焦点事件：
focus：元素获得焦点（不冒泡）
blur：元素失去焦点（不冒泡）
focusin：获取焦点（冒泡）
focusout：失去焦点（冒泡）
- 表单事件：
submit：表单提交事件（仅form元素）
reset：表单重置事件（仅form元素）
input：用户在输入控件中输入内容触发
change：表单控件内容更改触发（改变且失去焦点后才触发）
invalid：表单验证失败事件（不冒泡）
- 窗口事件（window对象）：
load：页面上所有资源加载完成
error：资源加载失败触发（不冒泡）
beforeunload：页面卸载前触发(关闭标签页/刷新页面)
scroll：页面滚动事件：
窗口事件对象不提供滚动距离，但dom对象可以找到滚动后隐藏的部分高度和宽度
scrollTop，scrollLeft：（dom对象的属性，可随时访问）上边或者左边隐藏内容的宽高
scroolHeight，scrollWidth：全部滚动内容的高度和宽度（当滚动条不在元素内而是整个窗口时，不能直接用window，因为bom没有这个属性，我们要拿文档对象的宽高(因为window是bom对象！！！要分清window，document和doucument.doucmentElement)，要用doucument.doucmentElement获取这个scroolHeight）
resize：窗口大小调整事件（监听的是视口尺寸）
屏幕尺寸：window.screen.width、window.screen.height
浏览器窗口尺寸：window.outerWidth、window.outerHeight（包括导航栏等等）
窗口尺寸(包含滚动条）：window.innerWidth、window.innerHeight
视口尺寸(不包含滚动条）：html.clientWidth、html.clientHeight
实际内容尺寸（内容加内边距）：scrollWidth、scrollHeight
元素位置：offsetLeft，offsetTop：相对该元素的offsetParent（填充盒）body特殊，会包含整盒
offsetParent：获取元素的第一个定位祖先元素，无定位祖先元素，则找body
getBoundingClientRect()：返回一个对象，该对象记录了相对于视口的距离
- 文档事件：
DOMContentLoaded:DOM树构建完成后触发（ready事件）
redaystatechange：准备状态切换事件
readystate：
loading：正在加载中
interactive：可交互的（dom构建树完成）
complete：所有资源加载完成
- 剪贴板事件：
copy：复制内容时触发
cut：剪切内容时触发
paste：粘贴内容时触发
clipboardData（剪切板事件对象）：getData(获取数据的类型（MIME类型）)
4.事件模拟：（通过代码触发事件）
click、submit、reset、focus、blur、select
事件的派遣：
dispatchEvent：要派遣的事件对象的元素.dispatchEvent（被派遣的事件对象）
算法详解：从动态规划到贪心二分优化)