事件对象
定义：是个对象，这个对象里有事件触发时的相关信息
例如：鼠标点击事件中，事件对象就存在鼠标点在那个位置等等信息
获取对象
- 在事件绑定的回调函数的第一个参数就是事件对象
- 一般命名为：event、ev、e
-
元素.addEventListener('click', function (event) {}) //event就是事件对象
事件对象常用的属性
| 属性 | 描述 |
|---|---|
| type | 获取当前的事件类型 |
| clientX/clientY | 获取光标相对于浏览器可见窗口左上角的位置 |
| offsetX/offsetY | 获取光标相对于当前DOM元素左上角的位置 |
| key | 用户按下的键盘键的值、不提倡使用keyCode |
案例：跟随鼠标案例
需求：一张图片一直跟着鼠标移动
分析：
- 鼠标在页面中移动，用到 mousemove 事件
- 不断把鼠标在页面中的坐标位置给图片left和top值即可
<img style=" position: relative;left: 0;top: 0;" src="./images/9.5/05.jpg" alt="">
<script>
let img = document.querySelector('img')
document.addEventListener('mousemove', function (e) {
img.style.left = e.clientX + 'px'
img.style.top = e.clientY + 'px'
})
</script>
事件流
事件流指的是事件完整执行过程中的流动路径
- 假设页面里有个button，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
- 简而言之：捕获阶段是 从父到子 冒泡阶段是从子到父
事件的三阶段：
- 捕获
- 目标
- 冒泡
事件捕获
概念：从DOM的根元素开始去执行对应的事件（从外到里）
语法：
元素.addEventListener('事件类型',处理函数,是否捕获机制)
- addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
- 若传入false代表冒泡阶段触发，默认就是false
- 若是用 L0 事件监听，则只有冒泡阶段，没有捕获
事件冒泡
概念：当一个元素的事件被触发时，将会在该元素的所有祖先元素中同样的事件会依次被触发。这一过程被称为事件冒泡（事件冒泡是默认存在的）
阻止事件流动
语法：
事件对象.stopPropagation()
- 此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
鼠标经过事件（扩展）
- mouseover 和 mouseout 会有冒泡效果
- mouseenter 和 mouseleave 没有冒泡效果(推荐)
阻止默认行为，比如链接点击不跳转，表单域的不提交
语法：
e.preventDefault()
两种注册事件的区别
-
传统on注册（L0）
- 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
- 直接使用null覆盖就可以实现事件的解绑
- 都是冒泡阶段执行的
-
事件监听注册（L2）
- 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
- 后面注册的事件不会覆盖前面注册的事件(同一个事件)
- 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
- 必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
- 匿名函数无法被解绑
例：
<a href="http://www.baidu.com">不跳转到百度</a>
<script>
//获取元素
let mya = document.querySelector('a')
function aa(e) {
// preventDefault:阻止元素的默认行为
e.preventDefault()
// alert('你点击我了')
console.log('你点击我了')
// 将事件解绑
// mya.removeEventListener('click', aa)
}
mya.addEventListener('click', aa)
</script>
事件委托*
事件委托是利用事件流的特征解决一些开发需求的知识技巧
- 优点：给父级元素加事件（可以提高性能）
- 原理：事件委托是依靠事件冒泡的特点，给父元素添加事件，子元素可以触发
- 实现：事件对象.target可以获得真正触发事件的元素
注：
- 事件委托的对象是父元素
- 可以通过e.target、事件对象.target找到真正触发的元素
