[Day 26]从零开始学习 JS 的连续-30 Days---冒泡与捕捉事件

冒泡事件- 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);

今天就到这结束了。

<<: Day 29: Detective 简介与操作

>>: Day26 - [丰收款] 永丰线上收款支付API功能实作总结(2)