day04---DOM- 事件高级

事件对象

事件对象是什么？
当事件触发的时候，产生的对象，该对象记录有事件相关的信息。
如何获取事件对象？
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e

事件对象常用属性

常用属性
pageX/pageY ：获取光标相对于页面左上角的位置
key：用户按下的键盘键的值

事件流

什么是事件流？
事件流指的是事件完整执行过程中的流动路径

事件流和两个阶段说明
说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
简单来说：捕获阶段是 从父到子 冒泡阶段是从子到父

事件冒泡概念: 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
事件冒泡是默认存在的

事件捕获概念：
从DOM的根元素开始去执行对应的事件 (从外到里)
说明：
addEventListener第三个参数传入true代表是捕获阶段触发（了解即可）
若传入false代表冒泡阶段触发，默认就是false
若是用 L0 事件监听，则只有冒泡阶段，没有捕获

阻止事件流动

阻止事件流动需要通过事件对象来实现
事件对象.stopPropagation
此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

鼠标经过事件：
mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果(推荐)

两种注册事件的区别(了解)

传统on注册（L0）
同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
直接使用null覆盖就可以实现事件的解绑
都是冒泡阶段执行的

事件监听注册（L2）
语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
后面注册的事件不会覆盖前面注册的事件(同一个事件)
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
匿名函数无法被解绑

阻止浏览器的默认行为

阻止默认行为，比如链接点击不跳转，表单域的不提交
语法：e.prevevtDefault()

事件委托

优点：给父级元素加事件（可以提高性能）
原理：事件冒泡，给父元素注册的事件，子元素是可以触发
实现：事件对象.target 可以获得真正触发事件的元素