iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 25
1
自我挑戰組

新手村-30 Day JS Coding Challenge系列 第 25

新手村25 - Event Capture, Propagation, Bubbling and Once

25 - Event Capture, Propagation, Bubbling and Once

俗話說的好,一天一蘋果,醫生遠離我

一天一 JS,What the f*ck JavaScript?

small steps every day - 記錄著新手村日記

完成目標

Only addEventListener!Only addEventListener!Only addEventListener!

index_START.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Understanding JavaScript's Capture</title>
</head>
<body class="bod">

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

<style>
  html {
    box-sizing: border-box;
  }
  
  *, *:before, *:after { 
    box-sizing: inherit; 
  }

  div {
    width: 100%;
    padding: 100px;
  }

  .one {
    background: thistle;
  }

  .two {
    background: mistyrose;
  }

  .three {
    background: coral;
  }
</style>

<button></button>
<script>

</script>
</body>
</html>

JS - step by step

  1. Bubbling

    • 作業系統 到 瀏覽器 到 html 到 body 到 使用者 按的元素都會被觸發事件

    • 事件預設的執行順序是從元素往上到 body

    <script>
      const divs = document.querySelectorAll('div');
      const button = document.querySelector('button');
    
      button.addEventListener('click', () => {
        console.log('Click!!!');
      }
    </script>
    
  2. Event Capture

    • 瀏覽器做的事稱為捕捉
    • 意思是你點擊元素以跟到樹梢的順序捕捉所有的事件(與Bubble相反)
    <script>
      const divs = document.querySelectorAll('div');
      const button = document.querySelector('button');
    
    	function logText(e) {
        console.log(this.classList.value);
        // e.stopPropagation(); // stop bubbling!
        // console.log(this);
      }
    </script>
    
  3. Propagation

    • stopPropagation() 方法可阻止當前事件繼續進行捕捉及冒泡階段的傳遞
    • 設定 capture:false 取消預設行為,變成「點到誰,就是誰」
    • Event.stopPropagation():https://tinyurl.com/yy2qfbew
    <script>
      const divs = document.querySelectorAll('div');
      const button = document.querySelector('button');
    	//略
    	divs.forEach(div => div.addEventListener('click', logText, {
        capture: false,
        once: true
      }));
    </script>
    
  4. Once(new property)

    • addEventListener的第三個參數加上 once: false 會將行預設行為
    <script>
      const divs = document.querySelectorAll('div');
      const button = document.querySelector('button');
    	//略
    	button.addEventListener('click', () => {
        console.log('Click!!!');
      }, {
        once: true
      });
    </script>
    

就大功告成啦!

JS - final

<script>
  const divs = document.querySelectorAll('div');
  const button = document.querySelector('button');

  function logText(e) {
    console.log(this.classList.value);
    // e.stopPropagation(); // stop bubbling!
    // console.log(this);
  }

  divs.forEach(div => div.addEventListener('click', logText, {
    capture: false,
    once: true
  }));

  button.addEventListener('click', () => {
    console.log('Click!!!');
  }, {
    once: true
  });

</script>

本刊同步於個人網站:http://chestertang.site/

本次範例程式碼原作者來源:https://tinyurl.com/yavm5f5n


上一篇
新手村24 - Sticky Nav
下一篇
新手村26 - Stripe Follow Along Nav
系列文
新手村-30 Day JS Coding Challenge30

尚未有邦友留言

立即登入留言