一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。
一、事件对象
1.1 获取事件对象
事件对象是什么？
- 也是个对象，这个对象里有事件触发时的相关信息 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
如何获取？
-
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e
元素.addEvenListener('',function(e){})
1.2事件常用属性
部分常用属性：
- type 获取当前的事件类型
- clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置（当前可视区域，例如向下移动的话也不改变）
- offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置（相对于元素来说，例如一个盒子的内边距）
- pageX和pageY（因页面的变化改变，不局限于之前可视区）
- key 用户按下的键盘键的值 现在不提倡使用keyCode
2.1 事件流和两个阶段说明
第二阶段：事件冒泡
-
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
-
简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件事件冒泡是默认存在的（例如：click）
第一阶段：事件捕获
从DOM的根元素开始去执行对应的事件 (从外到里)，事件捕获需要写对应代码才能看到效果
代码：
说明：
- addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
- 若传入false代表冒泡阶段触发，默认就是false
- 若是用 L0 事件监听，则只有冒泡阶段，没有捕获
2.3 阻止事件流动
因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素。若想把事件就限制在当前元素内，就需要阻止事件流动，阻止事件流动需要拿到事件对象。
语法：
事件对象.stopPropagation()
此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
- 鼠标经过事件： mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果(推荐)
- 阻止默认行为，比如链接点击不跳转，表单域的不提交 语法：
- 两种注册事件的区别：
- 传统on注册（L0） 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
直接使用null覆盖偶就可以实现事件的解绑
都是冒泡阶段执行的
- 事件监听注册（L2） 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
后面注册的事件不会覆盖前面注册的事件(同一个事件)
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
必须使用removeEventListener解绑(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
匿名函数无法被解绑
事件委托
- 优点：给父级元素加事件（可以提高性能）
- 原理：事件委托其实是利用事件冒泡的特点， 给父元素添加事件，子元素可以触发
- 实现：事件对象.target 可以获得真正触发事件的元素
