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

11th鐵人賽 javascript 前端新手村

Chester

2019-10-10 00:07:53

740 瀏覽

分享至

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

Bubbling

作業系統到瀏覽器到 html 到 body 到使用者按的元素都會被觸發事件
事件預設的執行順序是從元素往上到 body

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

  button.addEventListener('click', () => {
    console.log('Click!!!');
  }
</script>

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>

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>

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