本质

给元素添加一段代码, 用户触发后执行相应代码

注册事件addEventListener

1）元素.addEventListener('事件类型', 函数)；
2）给元素添加事件(给谁做)；
3）类型: 用户的触发方式(怎么做)；
4）函数: 触发后的处理效果(做什么)。

事件三要素

1、事件源：发生事件的元素；
2、事件类型：触发事件的动作；
1）鼠标：
click单击；
mouseover鼠标悬停；
mouseout鼠标移出；
mouseenter鼠标进入；
mouseleave鼠标移出；
2）键盘：
keydown按下；
keyup松开；
3）文本：
input内容改变
4）焦点：
focus得到焦点；
blur失去焦点。

事件流

1、本质：事件发生的过程；
2、两个阶段
1）捕获
从window到目标；
DOM0:on事件，只有冒泡阶段；
DOM2: addEventListener(,,触发阶段)，默认false：冒泡，true: 捕获。
2）冒泡
从目标到window；
作用: 事件委托
条件：父子关系（父级元素即可）；
孩子多, 动态变化，数量不确定；
事件绑定给父元素；
用e.target区分目标元素。
3、阻止事件流转
e.stopPropagation()
4、阻止默认事件
e.preventDefault()
一般阻止以下默认事件用到：
a链接点击跳转；
回车换行效果；
表单提交；
右键事件；

事件取消

1、DOM0：on注册事件，同一类型事件只能一个, 后面的覆盖前面，取消事件: on事件 = null
2、DOM2：addEventListener注册事件，同一类型事件可以多个，取消事件: removeEventListener()，只能取消有名回调，匿名函数无法取消（）。

window加载事件

1、load事件
必须等到所有内容(包括图片内容)加载结束后才会执行；
2、DOMContentLoaded事件
只要结构加载完毕就会触发。

三大家族

1、scroll家族
1）滚动家族: 元素或者页面滚动的时候才用的上；
2）一般都是页面滚动；
window的scroll事件；
滚动距离：
scrollLeft: 左滚动；
scrollTop: 上滚动；
一般用html标签: document.documentElement。
2、offset家族
1）获取元素的真实大小和偏移；
2）大小：offsetWidth；offsetHeight；（组成: border + padding + content）
3）偏移：offsetLeft；offsetTop；距离定位父级的距离，如果没有定位父级，即到body的距离。
3、client家族
1）可视家族: 做响应式布局；
2）可视大小：clientWidth；clientHeight；（组成: padding + content）
3）监听页面大小改变；（window的resize事件）