事件捕获和事件冒泡

2021-10-10 13:04:24 阅读：139 来源： 互联网

标签：color 捕获冒泡 background addEventListener click 事件

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

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

当我们触发某个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几句了。冲冲冲。

标签：color,捕获,冒泡,background,addEventListener,click,事件
来源： https://www.cnblogs.com/taosifan/p/15386128.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

事件捕获和事件冒泡

事件委托/事件代理