一.事件对象
也是个对象，这个对象里面有事件触发的相关内容
-
获取事件对象
元素.addEventListener('click', function(e){ }
1.在事件绑定的回调函数的第一个参数就是事件对象
2.一般命名为event ，ev，e
*事件对象的属性
- type
获取当前的事件类型
- clientX/ clientX
获取光标相对一浏览器可见窗口左上角的位置
- offsetX/offsetY
获取光标相对于DOM元素左上角的位置
- key
用户按下的键盘键的值
现在不提倡使用keyCode
跟随鼠标小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<img src="../img/kyrie10.png" alt="">
</body>
<script>
let img = document.querySelector('img')
document.addEventListener('mousemove', function(e) {
// 不断得到当前的鼠标坐标
// 把坐标给图片
img.style.left = e.pageX + 'px'
img.style.top = e.pageY + 'px'
})
</script>
</html>
事件流
事件流值得是事件完整执行过程的流动路径
两个阶段
- 冒泡阶段 从子到父 简单理解（当一个元素触发事件后，会依次向上调用所有父级元素的同名事件）
事件冒泡是默认存在的
- 捕获阶段 从父到子 从DOM的根元素开始去执行对应的事件（从外到里）
事件捕获需要写对应代码才能看到效果
DOM.addEventListener（事件类型，事件处理函数，是否使用捕获机制）
addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
传入false代表冒泡阶段触发，默认false
若用Lo事件监听，则只有冒泡阶段，没有捕获
阻止事件流动
想把事件限制在元素内，就需要阻止时间流动
时间对象.stopPropagation()//阻止传播
鼠标经过事件
mouseover mouseout//会有冒泡效果
mouseenter mouseleave//没有冒泡效果（推荐）
阻止默认行为
e.prevenntDefault()//阻止默认行为
注册事件
两中注册事件的区别
传统on注册
- 同一个对象，后面注册的事件会覆盖前面注册（同一个事件）
- 直接使用null覆盖就可以实现事件的解绑
- 都是冒泡阶段执行的
事件监听注册
- addEventListener语法
- 后面注册的事件不会覆盖前面的
- 可以通过第三个参数去确定实在冒泡还是捕获阶段执行
- 必须使用removerEventListener（事件类型，事件处理函数，获取捕获或者冒泡阶段）
- 匿名函数无法被解绑
事件委托
事件委托利用事件流的特征解决一些开发需求的知识技巧
不用小li而是把事件委托给他的父亲
事件委托是给父级添加事件
原理：事件委托是利用事件冒泡的特点，给父元素添加事件，子元素可以触发
实现：事件对象.target可以获得真正触发时间的元素
怎么得到当前的元素
e.target
