JS事件添加、传递以及事件代理的研究

一、事件添加

1.使用多种方式为元素添加事件

（1）通过事件属性为元素添加事件
事件属性：通过属性为元素添加事件，这个属性即事件属性。语法：on+事件，如onclick，onclick即为一个事件属性。

    <!-- 通过事件属性添加事件 按钮1234-->
    <div>
      <button onclick="console.log((document.querySelector('button')).innerText);">按钮1</button>
      <button onclick="BtnClick2()">按钮2</button>
      <button onclick="BtnClick3(this)">按钮3</button>
      <!--传递当前事件对象 -->
      <button onclick="BtnClick4(event)">按钮4</button>
    </div>
    <script>
      function BtnClick2() {
        console.log(document.querySelector("button:nth-of-type(2)").innerText);
      }
      function BtnClick3(ev) {
        console.log(ev.innerText);
      }
      function BtnClick4(ev) {
        console.log(ev.target); //event对象代表对事务的状态  属性target返回触发事件的元素
      }
</script>

(2)通过脚本为元素添加事件(给元素对象添加事件)

      <!-- 通过脚本添加事件 不需要添加事件属性 -->
      <div class="btn">
        <button class="btn5">按钮5</button>
        <button class="btn6">按钮6</button>
        <button class="btn_ad">广告按钮</button>
      </div>
<script>
      const btn5 = document.querySelector(".btn5");
      btn5.onclick = (ev) => console.log(ev.target); //传入元素event对象  event.type为事件名称
      //onclick只能添加一个事件 使用事件监听器可以添加多个事件
      //addEventListener(事件名称，回调方法，传递机制：捕获/冒泡)
      //false:冒泡 true：捕获
      const btn6 = document.querySelector(".btn6");
      btn6.addEventListener(
        "click",
        (ev) => console.log(ev.target.innerText),
        false
      );
      //   btn6.addEventListener("mouseover", () => console.log("移入"), false);
      //   btn6.addEventListener("mouseout", () => console.log("移出"), false);
      //使用事件派发器自动执行某个工作
      const btn_ad = document.querySelector(".btn_ad");
      btn_ad.addEventListener(
        "click",
        (ev) => console.log("广告已经点击"),
        false
      );
      //创建一个点击事件的实例
      const ev = new Event("click");
      //btn_ad.dispatchEvent(ev);
      setInterval(() => btn5.dispatchEvent(ev), 1000); //dispatchEvent() 方法给节点分派一个合成事件。
</script>

dispatchEvent() 方法给节点派发一个事件。（自定义事件）
setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval(fn/string,毫秒)

二、事件传递机制

1.捕获 true

      const grandpa = document.querySelector(".grandpa");
      const father = document.querySelector(".father");
      const son = document.querySelector(".son");
      grandpa.addEventListener(
        "click",
        (ev) =>
          console.log(
            " grandpa    触发元素:%s,绑定元素:%s",
            ev.target.classList.item(0), //classList.item[index]返回元素中索引值对应的类名,索引从0开始
            ev.currentTarget.classList.item(0) //currentTarget返回其监听器触发事件的节点
          ),
        true
      );
      father.addEventListener(
        "click",
        (ev) =>
          console.log(
            " father    触发元素:%s,绑定元素:%s",
            ev.target.classList.item(0),
            ev.currentTarget.classList.item(0)
          ),
        true
      );
      son.addEventListener(
        "click",
        (ev) =>
          console.log(
            " son    触发元素:%s,绑定元素:%s",
            ev.target.classList.item(0),
            ev.currentTarget.classList.item(0)
          ),
        true
      );

2.冒泡 flase

阻止事件冒泡：stopPropagation()和window.event.cancelBubble = true
阻止默认行为：preventDefault()和return false

三、事件代理

根据冒泡原理 子元素的同名事件会向上冒泡父级元素的同名事件。 所以直接将事件添加给父元素就可以，可以极大的简化代码和业务逻辑。轮播图和选项卡中运用会多点。

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <script>
      const ul = document.querySelector("ul");
      ul.addEventListener("click", (ev) =>
        console.log("第%s个列", ev.target.innerText)
      );//给父元素ul添加点击事件
    </script>

四、总结

想了很久才明白冒泡和捕获的区别，事件代理的意思也好理解。但是让我有点沮丧的是，可能是前面有些地方学的没到位，学到这里自己想着写个轮播图或者选项卡还是有点困难，还是要看后面老师讲的案例再去背和写了。