一.事件对象
事件对象是什么
- 当事件触发的时候，产生的对象，该对象记录有事件相关的信息
如何获取
- 在事件绑定的回调函数的第一个参数就是事件对象
- 一般命名为event、ev、e
document.addEventListener('click',function (e) {
console.log(e)
})
事件对象常用属性
获取鼠标的位置信息
e.pageX , e.pageYkeydown 键盘摁下 keyup 键盘弹起
keydown 按住不松 会一直触发
key 属性 可以获取按下哪个键 e.key
鼠标移动事件 mousemove
扩展:
元素.click() 表示元素被模拟点击了
e.key === 'Enter' 判断是否按了回车
二.事件流
1.事件流指的是事件完整执行过程中的流动路径
1.png
- 说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
- 简单来说：捕获阶段是 从父到子 冒泡阶段是从子到父
2.事件捕获和事件冒泡
事件冒泡
- 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
- 简单理解：当一个元素触发事件后，会依次向上触发所有父级元素的同名事件 (由里到外)
- 事件冒泡是默认存在的
事件捕获 - addEventListener 方法 有3个参数 (事件类型,事件处理函数,是否使用捕获机制)
- true 表示使用事件捕获
- false 默认值 表示使用事件冒泡
- 若是用 L0 事件监听(on方法)，则只有冒泡阶段，没有捕获
3.阻止事件流动(阻止事件冒泡)
- 事件对象.stopPropagation()
- 此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
<script>
// 阻止事件流动
// 需求：在点击son的时候，点击事件不要冒泡到father上
let fa = document.querySelector('.father')
let son = document.querySelector('.son')
son.addEventListener('click', function (e) {
console.log('is son')
// 阻止事件流动(阻止事件冒泡)
e.stopPropagation()
})
fa.addEventListener('click', function (e) {
console.log('is father')
})
</script>
4.鼠标经过事件
mouseover 和 mouseout 会有冒泡效果 事件会频繁触发
mouseenter 和 mouseleave 没有冒泡效果(推荐)
5.解绑事件
解绑语法:
- 元素.onclick = null
- removeEventListener 注册事件解绑 事件处理函数不能匿名 匿名无法解绑
6.两种注册事件的区别:
传统on注册（L0）
- 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
- 直接使用null覆盖就可以实现事件的解绑
- 都是冒泡阶段执行的
事件监听注册（L2） - 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
- 后面注册的事件不会覆盖前面注册的事件(同一个事件)
- 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
- 必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
- 匿名函数无法被解绑
7.阻止浏览器默认行为
- 比如链接点击不跳转，表单域的不提交
- 语法: e.preventDefault()
三.事件委托
事件委托:
- 优点：给父级元素加事件（可以提高性能） 动态创建的元素也能触发事件
- 原理：事件冒泡，给父元素注册的事件，子元素是可以触发
- 实现：事件对象.target 可以获得真正触发事件的元素
e.target 获取触发事件的元素
e.target.tagName 获取元素标签名 判断便签名的时候 标签名要大写 e.target.tagName === 'H1'
