一、事件对象
当事件触发的时候，就会产生个对象，记录和该事件有关的信息，对象就是事件对象
获取：在事件处理函数中添加个形参e
常用属性：
鼠标事件：
clientX,clientY:参照浏览器可见区域的左上角
offsetX,offsetY:参照元素左上角
键盘事件：
key：按下的键的名称
which:按下的键的键码 Enter：13 Esc:27
e.target:真正触发事件的对象
二、事件流
事件会经历两个阶段
1.捕获阶段
2.冒泡阶段
事件冒泡，从里到外
当一个元素的事件触发了，同样的事件会在该元素的所有祖先元素中依次来触发
事件捕获，从外到里
通过addEventListener第三个参数来决定是冒泡还是捕获
true 表示注册的事件是在捕获阶段来触发
false 默认值 表示注册的事件是在冒泡阶段来触发
鼠标移入移出事件
mouseenter mouseleave 推荐使用 不会冒泡
阻止事件传播
可以阻止捕获也可以阻止冒泡
e.stopPropagation()
阻止默认行为
e.preventDefault()
常见的默认行为
1.a链接默认跳转
2.表单提交
三、事件委托
表现形式：将事件绑定给已存在的父容器，每一个子元素都能触发
原理：是利用了事件冒泡的原理：子元素触发事件，也会将事件冒泡给父容器
优点：
- 简化代码
- 对已有元素和未来元素都有效
如何实现
把事件委托注册给父元素（祖先元素），父容器一定要已经存在
如何得知触发事件的具体元素是谁：
1.e.target
2.e.target.tagName 标签名
伴随前端生涯的两句话：
1. 页面中的元素操作本质上是数据操作 2. 页面操作的结果一定要体现到数据
