事件对象
事件对象是什么
也是个对象，这个对象里有事件触发时的相关信息
如何获取
在事件绑定的回调函数的第一个参数就是事件对象,一般命名为event、ev、e
元素.addeventlistner('click',function(e){
})
部分常用属性
- type:获取当前的事件类型
- clientX/clientY:获取光标相对于浏览器可见窗口左上角的位置
- offsetX/offsetY:获取光标相对于当前DOM元素左上角的位置
- key:用户按下的键盘键的值;现在不提倡使用keyCode
事件流
事件流与两个阶段说明
- 事件流指的是事件完整执行过程中的流动路径
- 说明:假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
- 简单来说:捕获阶段是从父到子，冒泡阶段是从子到父
事件冒泡
- 事件冒泡概念: 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
- 简单理解:当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
- 事件冒泡是默认存在的
事件捕获
- 事件捕获概念: 从DOM的根元素开始去执行对应的事件 (从外到里)
- 事件捕获需要写对应代码才能看到效果
- 代码:
dom.addeventlistner(事件类型，时间处理函数，是否使用捕获机制)
- 说明:
➢ addEventListener第三个参数传入true代表是捕获阶段触发(很少使用)
➢若传入false代表冒泡阶段触发，默认就是false
➢ 若是用 L0 事件监听，则只有冒泡阶段，没有捕获
阻止事件流动
- 因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
- 若想把事件就限制在当前元素内，就需要阻止事件流动
- 阻止事件流动需要拿到事件对象
- 语法:
事件对象.stopPropagation()
- 此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
- 鼠标经过事件:
➢ mouseover 和 mouseout 会有冒泡效果
➢ mouseenter 和 mouseleave 没有冒泡效果(推荐)
阻止默认行为
- 比如链接点击不跳转，表单域的不提交
- 语法:
e.preventDefault()
事件委托
- 事件委托是利用事件流的特征解决一些开发需求的知识技巧
- 总结:
➢ 优点:给父级元素加事件(可以提高性能)
➢ 原理:事件委托其实是利用事件冒泡的特点,给父元素添加事件，子元素可以触发
➢ 实现:事件对象.target 可以获得真正触发事件的元素
