Web API-DOM事件高级

什么是事件对象

事件触发时的相关信息

获取事件对象

btn.addEventListener("click", function (e) {});//e是事件对象

常见的事件对象属性

属性	作用
type	获取当前的事件类型
clientX/clientY	获取光标相对于浏览器可见窗口左上角位置
offsetX/offsetY	获取光标相对于当前DOM元素左上角的位置
key	用户按下的键盘键的值（现在不提倡使用keycode）
pagex/y	相当于网页左上角计算的

---

什么是事件流

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

分为两个阶段： 捕获阶段是从父到子 （从DOM的根元素开始去执行对应的事件 (从外到里)）
冒泡阶段是从子到父（当一个元素触发事件后，会依次向上调用所有父级元素的同名事件，默认存在

⚫ 注意：
➢ addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
➢ 若传入false代表冒泡阶段触发，默认就是false
➢ 若是用 L0 事件监听，则只有冒泡阶段，没有捕获

阻止事件流动

事件对象.stopPropagation();

1.因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
2.若想把事件就限制在当前元素内，就需要阻止事件流动

鼠标经过

➢ mouseover 和 mouseout 会有冒泡效果（会调用他的所有父元素同名事件）
➢ mouseenter 和 mouseleave 没有冒泡效果(推荐)

---

阻止事件

例如a链接不跳转，不提交到表单域
元素.preventDefault();

---

两种注册事件的区别

第一种传统标签节点（L0）

①同一个对象,后面注册的事件会覆盖前面注册(同一个事件)

 btn.onclick = function () {
      alert("1");
    };
    btn.onclick = function () {
      alert("2");
    };//弹出2

② 直接使用null覆盖偶就可以实现事件的解绑
// L0事件解绑

   btn.onclick = function () {
      alert("1");
    };
    //用此时的null覆盖刚刚的函数
    btn.onclick = null;

③ 都是冒泡阶段执行的

第二种addEventListener（L2）

优点：控制事件流程方便，同名不覆盖
① 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
② 后面注册的事件不会覆盖前面注册的事件(同一个事件)
③ 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
④必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
⑤匿名函数无法被解绑（必须是有名函数）

btn.addEventListener("click", fn);
    function fn() {
      alert("2");
    }
    btn.removeEventListener("click", fn);

---

事件委托

事件对象.target
优点：
1.减少事件的绑定次数
2.代码性能高
3.可以给未来元素（通过程序添加的标签）注册事件