事件添加/代理和事件派发委托细说

事件的添加方式

1. 事件属性：通过属性来添加 => on + 事件名称 如 onclick
<button onclick="let a = 'admin';console.log(this.innerText, a)">按钮1</button>
2. 通过脚本的方式来添加

<button onclick="show(this)">按钮2</button>
<script>
  // 事件对应的函数
  function show(ele) {
    console.log(ele.innerText);
  }
</script>

1. 给对象添加属性的方式

      const btn3 = document.querySelector("button:nth-of-type(3)");
      // ev.target: 表示当前按钮,其实就是事件的触发者
      btn3.onclick = (ev) => console.log(ev.target);

1. 事件监听器

   语法：.addEventListener(事件名称,回调函数,传递机制【捕获/冒泡】)
   通过addEventListener可以同时给一个属性添加多个时间，如鼠标移入或鼠标移出可以同时存在。
   捕获和冒泡的区别：捕获是从上到下，既从父元素到子元素蔓延传递，是将事件按照一定的顺序开始执行，找到条件符合的时候就执行，捕获是从父元素到子元素的捕获过程，而冒泡是从下到上蔓延传递，类似在水里的气泡一样，而冒泡是从子元素开始往父元素蔓延，或按照从子元素开始到父元素的顺序执行事件。
   捕获 阶段：在事件对象到达事件目标之前，事件对象必须从 window 经过目标的祖先节点传播到事件目标。 这个阶段被我们称之为捕获阶段。在这个阶段注册的事件监听器在事件到达其目标前必须先处理事件。
   目标 阶段：事件对象到达其事件目标。 这个阶段被我们称为目标阶段。一旦事件对象到达事件目标，该阶段的事件监听器就要对它进行处理。如果一个事件对象类型被标志为不能冒泡。那么对应的事件对象在到达此阶段时就会终止传播。
   冒泡 阶段： 事件对象以一个与捕获阶段相反的方向从事件目标传播经过其祖先节点传播到 window。这个阶段被称之为冒泡阶段。在此阶段注册的事件监听器会对相应的冒泡事件进行处理。
   这里可以参考一下查阅到的可以方便同学们阅读的资料：https://www.jianshu.com/p/3f0ee1f6ec30 >

btn4.addEventListener("click", (ev) => console.log(ev.target.innerText), false);

• 细说事件的捕获和冒泡

      // 事件的捕获和冒泡
      const first = document.querySelector(".first");
      const second = document.querySelector(".second");
      const three = document.querySelector(".three");
      // true: 捕获阶段, false: 冒泡阶段
      // addEventListener(evName, callback, true);
      // ev.target: 事件的触发者, ev.currentTarget: 事件的绑定者
      // ev.target.classList.item(0): 获取类名称
      first.addEventListener(
        "click",
        (ev) => console.log("捕获:触发 %s, 绑定 %s", ev.target.classList.item(0), ev.currentTarget.classList.item(0)),
        true
      );
      second.addEventListener(
        "click",
        (ev) => console.log("捕获:触发 %s, 绑定 %s", ev.target.classList.item(0), ev.currentTarget.classList.item(0)),
        true
      );
      three.addEventListener(
        "click",
        (ev) => console.log("捕获:触发 %s, 绑定 %s", ev.target.classList.item(0), ev.currentTarget.classList.item(0)),
        true
      );
      // false: 冒泡阶段
      first.addEventListener(
        "click",
        (ev) => console.log("冒泡:触发 %s, 绑定 %s", ev.target.classList.item(0), ev.currentTarget.classList.item(0)),
        false
      );
      second.addEventListener(
        "click",
        (ev) => console.log("冒泡:触发 %s, 绑定 %s", ev.target.classList.item(0), ev.currentTarget.classList.item(0)),
        false
      );
      three.addEventListener(
        "click",
        (ev) => console.log("冒泡:触发 %s, 绑定 %s", ev.target.classList.item(0), ev.currentTarget.classList.item(0)),
        false
      );

1. 事件派出器

事件派出器有什么作用：自动执行某个动作。new Event来创建事件实例，最后通过派发dispatchEvent实现自动实现。
原理/步骤：

• 创建一个事件实例
  const ev = new Event("click")
• 在需要自动执行的地方引用(开始派发)
  btn5.dispatchEvent；

      const btn5 = document.querySelector("button:last-of-type");
      btn5.addEventListener("click", (ev) => console.log("点击了广告"), false);
      const ev = new Event("click");
      btn5.dispatchEvent(ev);

1. 冒泡实现事件委托 / 事件代理

   通过冒泡的原理可以得到，我们想给一个父元素下的所有子元素添加一个事件，子元素的同名事件会向上冒泡到父级元素的同名事件上,所以直接将这个事件干脆添加给它的父元素就可以。

      document
        .querySelector("ul")
        .addEventListener("click", (ev) => console.log("触发 %s, 绑定 %s", ev.target, ev.currentTarget), false);

ul下的所有li都会有一个点击事件。