JS30 Day 25：Event Capture, Propagation, Bubbling and Once学习笔记

今天这章节主要是在练习事件绑定相关的知识。

主要以上面的画面来做事件的操作。

  <button>BTN</button>
  <div class="one">
    <div class="two">
      <div class="three">
      </div>
    </div>

    <ul>
      <li><a href="javascript:;">Button1</a></li>
      <li><a href="javascript:;">Button2</a></li>
      <li><a href="javascript:;">Button3</a></li>
    </ul>
  </div>

addEventListener

有分为三个参数。
1.事件类型(event)。
2.回呼函数(callback)。
3.设定(options) (替换掉原本的捕获(capture))。

事件分为两种模式。
1.捕获(capture):由外至内。
2.冒泡(bubbling)):由内至外。

此为最基本事件绑定的操作。

      let btn = document.querySelector("button");
      btn.addEventListener("click", btnHandler, {
        // options常用的参数，并以物件型式呈现，预设都为false
        // capture(boolean):true为捕获模式，反之冒泡 , once(boolean):只执行一次
        capture: true,
        once: true
      });

      function btnHandler() {
        console.log("click");
      }

利用one,two,three(外至内)的区域来做操作。

使用预设的options，事件模式为冒泡。

 let divs = document.querySelectorAll('div');
      divs.forEach(div => {
        div.addEventListener('click', divHandler, {
          capture: false,
          once: false
        })
      })

当我们阻止事件进行传递。
为捕捉模式时，只会获取最外层(one)，因为无法进行事件传递。
为冒泡模式时，只会获取当前层(one,two,three)，因为无法进行事件传递。

      function divHandler(e) {
        e.stopPropagation(); // 可阻止当前事件继续进行捕捉（capturing）及冒泡（bubbling）传递。
        console.log(this.className); // capture: false => three two one / true => one
        console.log(e.path, e.composedPath()); // [div.three, div.two, div.one, body.bod, html, document, Window] , [//]
      }

绑定事件:各别将事件绑到指定的dom上，而如果动态增加dom元素的话，新增的dom就不会被绑到事件。

      let as = document.querySelectorAll('a');
      as.forEach(a => {
        a.addEventListener('click', aHandler, {
          capture: false,
          once: false
        })
      })

而target就是我们最深层的目标，currentTarget就是绑定事件的目标
点击Button1,2,3後，会显示对应的讯息，委派的讯息(ul部分)也会显示出来，但当我们动态新增li之後再点击，发现绑定事件的讯息已经不见了。

      function aHandler(e) {
        console.log("Bind : a click", "target", e.target, "currentTarget", e.currentTarget);
        // target <a href="javascript:;">Button3</a> , currentTarget <a href="javascript:;">Button3</a>
      }

委派事件:也就是将事件监听做在外层，控制其委派范围内的dom，动态新增进来的dom也能获取事件。

      let ul = document.querySelector('ul');
      ul.addEventListener('click', ulHandler)

当Button1,2,3後，会显示对应的讯息，当我们动态新增li之後再点击，发现委派事件的讯息依然会显示。
而我们在委派时，可以利用判断if去筛选我们所需的dom。

      function ulHandler(e) {
        // 加以判断是否为a标签(nodeName会将标签转为大写)
        if (e.target.nodeName === "A") {
          console.log("delegate : a click", "target", e.target, "currentTarget", e.currentTarget);
          // target <a href="javascript:;">Button3</a>  , currentTarget <ul>…</ul> 
        }
      }