事件捕获和事件冒泡

2024-01-14 12:00:52

今天把事件捕获和事件冒泡彻底搞懂了。来记录一下。

当你监听一个事件的触发的时候，它会经历三个状态，第一个是捕获阶段，第二个是目标节点，第三个是冒泡阶段，画个图来表示一下。

当我们触发某个DOM的监听事件的时候，捕获阶段会从外向内找到这个DOM节点，一般会在冒泡阶段执行监听事件。也就是说，当我们有如下这样的父子孙节点的时候，同时在父子孙身上都绑定有监听事件，它的打印顺序应该是1,2,3：那么怎样才能让我们在事件的捕获阶段就执行监听事件呢？那么就要提到addEventListener的参数了，它有三个参数，分别是event Type，callback，Boolean。分别代表着事件类型，回调函数，是否在事件捕获阶段就执行回调函数，默认为false，当我们把它设为true的时候它就表示会在事件捕获阶段执行回调函数：

  grandson.addEventListener('click',  grandsonEvent, true)  
  son.addEventListener('click',sonEvent, true)
  father.addEventListener('click',fatherEvent, true)

那么这就完成了在事件捕获阶段去执行回调函数。接下来我们来考虑一下如何将事件冒泡给禁止，因为有时候事件冒泡会对我们的业务代码有不好的影响。
首先是w3c的方法是event.stopPropagation()，如果在目标元素上设置这个的话，就会阻止目标元素的事件冒泡到父级元素。如：


  grandson.addEventListener('click', grandsonEvent)  
  son.addEventListener('click',() => {
    sonEvent()
    event.stopPropagation()
  })
  father.addEventListener('click',fatherEvent)

我们在son的回调函数里面使用了event.stopPropagrtion()，阻止它进一步的冒泡到father盒子上，所以最后打印结果是1，2.
那么事件冒泡能给我们带来什么好东西或者方便的东西吗？那肯定是有的，也就是我们常说的事件委托。

事件委托/事件代理

首先介绍一下我个人理解的事件委托的意思，就是将子组件要完成的回调函数绑定到父组件上面，然后由父组件代为调用。比如这个例子，每点击一个格子就要显示出它的颜色：

  <style>
    ul li {
      width: 100px;
      height: 200px;
    }
    .purple {
      background-color: rgb(170, 74, 170);
    }
    .pink {
      background-color: pink;
    }
    .skyblue {
      background-color: skyblue;
    }
    .aqua {
      background-color: aqua;
    }
    .gray {
      background-color: gray;
    }
    ul {
      display: flex;
      list-style: none;
      text-align: center;
      height: 300px;
      background-color: red;
    }
  </style>
</head>
<body>
  <ul>
    <li class="purple">紫色</li>
    <li class="pink">粉红色</li>
    <li class="skyblue">天蓝色</li>
    <li class="aqua">青色</li>
    <li class="gray">灰色</li>
  </ul>
</body>
<script>
  let ul = document.querySelector('ul')
  ul.addEventListener('click', (event) => {
    console.log(event.srcElement.innerHTML);
  })

</script>

这样就可以很轻松的完成我们的代码。下次再面试到这个的话感觉我又能跟面试官battle几句了。冲冲冲。

码农公寓

事件委托/事件代理

相关文章