JS事件冒泡和事件捕获

最新推荐文章于 2024-03-16 11:12:42 发布

rainylululululu

最新推荐文章于 2024-03-16 11:12:42 发布

阅读量129

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/rainylululululu/article/details/105762951

版权

前端开发专栏收录该内容

17 篇文章 0 订阅

订阅专栏

冒泡和捕获概念

事件冒泡：事件开始时，由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）
事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件

具体例子

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试事件冒泡和事件捕获</title>
    <style>
        div{padding:40px;}
        #div1{background: #00B83F;}
        #div2{background: #2a6496}
        #div3{background: #93C3CF}
    </style>
    <script>
    window.onload=function (){
        var odiv1=document.getElementById("div1");
        var odiv2=document.getElementById("div2");
        var odiv3=document.getElementById("div3");

/***************************************事件冒泡**************************************************/
        odiv1.addEventListener('click',function(){
          alert("div1");
        })
        odiv2.addEventListener('click',function(el){
          alert("div2");
        },true)
        odiv3.addEventListener('click',function(el){
          // el.cancelBubble = true//此句可阻止冒泡
          alert("div3");
        })

/***************************************事件捕获**************************************************/
        // odiv1.addEventListener('click',function(){
        //   alert("div1");
        // },true)
        // odiv2.addEventListener('click',function(){
        //   alert("div2");
        // },true)
        // odiv3.addEventListener('click',function(el){
        //   alert("div3");
        // },true)

/********************同时有捕获和冒泡，先执行捕获，再执行冒泡**********************/
      // odiv1.addEventListener('click',function(){
        //   alert("div1");
        // })
        // odiv2.addEventListener('click',function(el){  //事件捕获
        //   alert("div2");
        // },true)
        // odiv3.addEventListener('click',function(el){
        //   alert("div3");
        // })
}
</script>

</head>
<body>
  <div id="div1">
      <div id="div2">
          <div id="div3"></div>
      </div>
  </div>
</body>
</html>