事件流
2 事件处理程序
4 事件对象
- 5 示例代码：
6 UI事件
7 焦点事件
- blur
- focus
8 鼠标与滚轮事件
9 键盘与文本事件
10 合成事件
11 变动事件
- 12 DOM变动事件
13 HTML5事件
14 设备事件
15 触摸与手势事件
16 内存和性能
- 事件委托
- 移除事件处理程序
17 模拟事件

事件流

事件冒泡

事件 - 图1

事件捕获

事件 - 图2

DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：
事件捕获阶段 → 处于目标阶段 → 事件冒泡阶段。
事件 - 图3

2 事件处理程序

事件 - 图4

3 示例代码

按钮只执行一次。
事件 - 图5

DOM0级事件

elemt.onclick=fn()

DOM2级事件

addEventListener()

事件 - 图6
addEventListener()方法添加的事件只能使用removeEventListener（）事件移除；（重要：最后的布尔值要统一）；
addEventListener()方法添加的匿名函数无法使用removeEventListener事件移除；

removeEventListener()

语法：element.removeEventListener(event, function, useCapture)
事件 - 图7

示例

点击事件

function savePoint(event){
    point.x = event.pageX
  point.y = event.pageY
}

添加

mounted(){
    window.addEventListener('click',savePoint)
}

移除

unmounted(){
    window.removeEventListener('click',savePoint)
}

注意：事件回调函数需要为同一个函数。

IE事件

attachEvent()和removeEvent()

attachEvent和addEventListener中的this指向不同。
在使用attachEvent方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window。
事件 - 图8

事件兼容方法封装

创建：

事件 - 图9

使用：

事件 - 图10

4 事件对象

事件 - 图11

5 示例代码：

事件 - 图12

6 UI事件

当用户与页面上的元素交互时触发

load

当页面完全加载后在window上面触发，当所有框架都加载完毕时在框架集上面触发，当图像加载完毕时在img元素上面触发，或者当嵌入的内容加载完毕时在object元素上面触发。

unload

当页面完全卸载后在window上面触发，当所有框架都卸载后在框架集上面触发，或者当嵌入的内容卸载完毕后在object元素上面触发。

abort

在用户停止下载过程时，如果嵌入的内容没有加载完，则在object元素上面触发。

error

当发生JavaScript错误时在window上面触发，当无法加载图像时在img元素上面触发，当无法加载嵌入内容时在object元素上面触发，或者当有一或多个框架无法加载时在框架集上面触发。

select

当用户选择文本框（input或texterea）中的一个或多个字符时触发。

resize

当窗口或框架的大小变化时在window或框架上面触发。

scroll

onscroll 事件在元素滚动条在滚动时触发。body元素中包含所加载页面的滚动条。
document.documentElement.scrollTop
网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

scrollHeight 获取对象的滚动高度。
scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth 获取对象的滚动宽度
offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

要获取当前页面的滚动条纵坐标位置，用：
document.documentElement.scrollTop;
而不是：
document.body.scrollTop;
documentElement 对应的是 html 标签，而 body 对应的是 body 标签