（黑马程序员）JavaScript DOM和BOM第四天学习笔记之事件对象

一、事件对象

1.1 获取事件对象

• 事件对象是做什么

  也是个对象，这个对象有事件触发时的相关信息

  例如：鼠标点击事件，事件对象就存了鼠标点在哪个位置等信息

• 如何获取

  在事件绑定的回调函数的第一个参数就是事件对象

  一般命名为event、ev、e

// e就是事件对象
元素.addEventListener('click', function(e) {
 })

• 部分常用属性

  type

  获取当前的事件类型

  clientX/clientY

  获取光标相对于浏览器可见窗口左上角的位置

  offsetX/offsetY

  获取光标相对于当前DOM元素左上角的位置

  key

  用户按下的键盘键的值

  现在不提倡使用keyCode

二、事件流

2.1事件流和两个阶段说明

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

说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段。

简单来说：捕获阶段是 从父到子 冒泡阶段是 从子到父

2.2 事件冒泡和事件捕获

• 事件冒泡概念：

  当一个元素的事件被触发时，同样的事件会将在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡

• 简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

• 事件冒泡是默认存在的

• 事件捕获概念：

  从DOM的根元素开始去执行对应的事件(从外到里)

• 事件捕获需要写对应代码才能看到效果

• 代码：

  document.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制);

• 说明：

  addEventListener第三个参数传入true代表是捕获阶段触发（很少使用)

  若传入false代表冒泡阶段触发，默认就是false

  若是用LO事件监听，则只有冒泡阶段，没有捕获

2.3 阻止事件流动

• 因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素

• 若想把事件就限制在当前元素内，就需要阻止事件流动

• 阻止事件流动需要拿到事件对象

• 语法:

  事件对象.stopPropagation();

• 此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

• 鼠标经过事件:

  mouseover和mouseout会有冒泡效果

  mouseenter 和mouseleave没有冒泡效果(推荐)

• 阻止默认行为，比如链接点击不跳转，表单域的跳转

• 语法：

  e.preventDefault();

• 两种注册事件的区别:

  传统on注册( LO)

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

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

  都是冒泡阶段执行的

  事件监听注册（L2)

  语法: addEventListener(事件类型,事件处理函数,是否使用捕获)

  后面注册的事件不会覆盖前面注册的事件(同一个事件)

  可以通过第三个参数去确定是在冒泡或者捕获阶段执行

  必须使用removeEventListener(事件类型,事件处理函数,获取捕获或者冒泡阶段)

  匿名函数无法被解绑

3.事件委托

• 事件委托是利用事件流的特征解决一些开发需求的知识技巧

• 总结：

  优点：给父级元素添加事件(可以提高性能)

  原理：事件委托其实是利用事件冒泡的特点，给父元素添加事件，子元素可以触发

  实现：事件对象.target可以获得真正触发事件的元素

     // 不要每个小li注册事件了 而是把事件委托给他的爸爸
        // 事件委托是给父亲添加事件  而不是孩子
        let ul = document.querySelector('ul');
         ul.addEventListener('click',function(e) {
            // alert('我点击了')
            // 得到当前的元素
            // console.log(e.target);
            e.target.style.color = 'red';
        })