25.js事件流

事件流描述的是从页面中接受事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流
分为三个阶段:

事件捕获 (从上到下,从外往内)

网景最早提出,由DOM最顶层节点开始,然后逐级向下传播到最具体的元素接收的过程 举一个例子 页面上有若干按钮,每个按钮都有自己的click事件,新需求,给用户加了一个属性,banned=true,此用户不可点击页面上的按钮,弹窗不可点击

      window.addEventListener(
        'click',
        (e) => {
          if (banned) e.stopPropagation();
        },
        true
      );

事件冒泡(从下到上,从里往外)

事件冒泡:IE最早提出,事件开始时由具体的元素接收,然后逐级向上传播到DOM最顶层节点的过程 应用最多的是事件委托,给父元素绑定事件,子元素触发

      ul.addEventListener('click', (e) => {
        console.log(e.target); // li
      });

给ul绑定的点击事件 可以点击li触发 节约性能和未知多少个li元素的时候也可以绑定

addEventListener

事件绑定 window.addEventListener('click',()=>{},true/false) 三个参数 第一个是事件 第二个绑定函数,第三个参数默认false 冒泡阶段, true 捕获阶段