webAPI第六天

事件流

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

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

事件冒泡:

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

事件冒泡是默认存在的（默认值 false,可以省略）

addEventListener("click","事件处理函数",true)

true 表示捕获

false 或者不写冒泡

（工作用得都是冒泡）

 举例：
事件流动 
      1 给多个父子结构的标签绑定事件， 先点击了子元素， 产生事件流动
      2 事件流动 分成了两个阶段
        1 捕获阶段   父节点 流动到 子节点
        2 冒泡节点   子节点 流动到 父节点   默认
        3 例子：
          人 跳水 
          1 水上 水里面 不断下沉 
        4 事件流动方向 默认是 使用了冒泡 - 点击儿子标签 触发 儿子->父亲->爷爷

      3 我们可以修改触发事件 让它选择使用 捕获阶段还是冒泡阶段（默认）
        addEventListener 可以选择使用冒泡还是捕获
        addEventListener(事件类型，事件处理函数，捕获还是冒泡（默认值 false,可以省略）)
        addEventListener("click",function(){}, true )

      4 总结
        1 捕获和 冒泡 特点 了解 
        2 默认情况  冒泡 如果想要修改 可以 addEventListener 第三个参数 传入 true即可
        3 以后的代码开发过程中，还是继续使用默认的 冒泡阶段

事件捕获：

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

代码：
DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
说明：
addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
若传入false代表冒泡阶段触发，默认就是false
若是用 L0 事件监听，则只有冒泡阶段，没有捕获

阻止事件流动

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

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

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

语法：
event.stopPropagation()

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

阻止标签的默认行为

1 a标签点击调整

2 form-button点击刷新

3 鼠标右键弹出菜单

4 解决方法

event.preventDefault()

事件委托

通过给父元素绑定事件，事件触发，判断一下当前触发事件的元素 target

优点：给父级元素加事件（可以提高性能）

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

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

      // 事件委托
      //  本来想要给li标签绑定事件实现业务
      //  把事件绑定写在 父元素上  把li标签应该要做的事情 委托给父元素来做！ 
      const ul=document.querySelector("ul");
      ul.addEventListener("click",function (event) {
        //  event.target 有可能是ul标签，有可能是li标签，还有可能是 a标签 
        // 一会再来解决这个问题。
        event.target.style.backgroundColor="red";// 不够完美的
        // event.target 你当前点击的是哪个标签（点击最深最底层的那个标签即可）
        // console.log(event.target);// 获取到被点击的li标签

滚动事件

整个页面滚动给window来绑定scroll事件

获取页面滚动的距离

document.docElement.scrollTop

某个元素滚动给元素绑定 scroll事件

        window.addEventListener('scroll',function(){ 
        })
        给 window 或 document 添加 scroll 事件

综合案例：

webAPI事件流