[Day 26]從零開始學習 JS 的連續-30 Days---冒泡與捕捉事件

13th鐵人賽

ymiee

2021-10-11 11:10:24

462 瀏覽

分享至

冒泡事件- event Bubbling vs. 捕捉事件- event capturing

addEventListener事件監聽裡寫法有三個參數，分別為1.選擇事件、2.帶入function、3.true或false。

冒泡事件- event Bubbling : 從指定元素往外找

// 第三個參數為 false
addEventListener('click',function(),false);

捕捉事件- event capturing : 從最外面找到指定元素

// 第三個參數為 true
addEventListener('click',function(),true);

舉例 :

<body class="body">
    <ul>
        <li><a href="#">1234</a></li>
        <li><a href="#">1234</a></li>
    </ul>
    <div class="box"></div>
    <script src="js/all.js"></script>
</body>

const el = document.querySelector('.box');
el.addEventListener('click',function(){
  alert('box');
  console.log('box');
},false);

const elBody = document.querySelector('.body');
elBody.addEventListener('click',function(){
  alert('body');
  console.log('body');
},false);

// 將上面程式碼 false 同時換成 true 則找尋方向會不同。

stopPropagation---中止冒泡

使用時機可用在元素與元素重疊的情況下，原本會執行第二個監聽事件就會被中止。
在指定的監聽事件加上 e.stopPropagation(); 此語法。

<body class="body">
    <ul>
        <li><a href="#">1234</a></li>
        <li><a href="#">1234</a></li>
    </ul>
    <div class="box"></div>
    <script src="js/all.js"></script>
</body>

const el = document.querySelector('.box');
el.addEventListener('click',function(){
  e.stopPropagation();   //中止冒泡語法
  alert('box');
  console.log('box');
},false);

const elBody = document.querySelector('.body');
elBody.addEventListener('click',function(){
  alert('body');
  console.log('body');
},false);

今天就到這結束了。