JS事件传播机制

最新推荐文章于 2025-11-08 11:18:05 发布

原创最新推荐文章于 2025-11-08 11:18:05 发布 · 306 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #html

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了JavaScript中的事件传播机制，包括捕获模式和冒泡模式。通过示例代码展示了当点击嵌套的div元素时，事件如何按照不同的传播模式从外到内或从内到外触发。在捕获模式下，事件首先由最外层元素触发，然后逐层向下传递；而在冒泡模式中，事件则从最内层元素开始，逐步向上层元素传播。理解这两种模式对于优化事件处理和提高代码效率至关重要。

JS的事件传播模式分为两种:

1.捕获模式(由外到内传播)

2.冒泡模式(由内到外传播)

捕获模式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
             margin: 0 auto;
        }
         .outdiv {
              width: 150px;
              height: 150px;
              border: 1px solid #ccc;
         }
           .middlediv {
            width: 100px;
              height: 100px;
              border: 1px solid #ccc;
              margin-top: 25px;
         }
         .innerdiv {
              width: 50px;
              height: 50px;
              border: 1px solid #ccc;
              margin-top: 25px;
         }


    </style>
</head>
<body>
     <div class="outdiv">
   
         <div class="middlediv">
     
              <div class="innerdiv">
                  
              </div>
         </div>
     </div>
     <script>
          var out = document.querySelector('.outdiv')
          var mid = document.querySelector('.middlediv')
          var inner = document.querySelector('.innerdiv')
          //addEventListener第三个参数默认为false为冒泡模式 设置为true为捕获模式
          out.addEventListener('click',function() {
               console.log('outdiv');
          },true)
          mid.addEventListener('click',function() {
               console.log('middiv');
          },true)
          inner.addEventListener('click',function() {
               console.log('innerdiv');
          },true)
     </script>
</body>
</html>

如图:当点击最里面的盒子是触发外层、中间、内层盒子的click事件

输出顺序为：outdiv、middiv、innerdiv

冒泡模式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
             margin: 0 auto;
        }
         .outdiv {
              width: 150px;
              height: 150px;
              border: 1px solid #ccc;
         }
           .middlediv {
              width: 100px;
              height: 100px;
              border: 1px solid #ccc;
              margin-top: 25px;
         }
         .innerdiv {
              width: 50px;
              height: 50px;
              border: 1px solid #ccc;
              margin-top: 25px;
         }


    </style>
</head>
<body>
     <div class="outdiv">
   
         <div class="middlediv">
     
              <div class="innerdiv">
                  
              </div>
         </div>
     </div>
     <script>
          var out = document.querySelector('.outdiv')
          var mid = document.querySelector('.middlediv')
          var inner = document.querySelector('.innerdiv')
          out.addEventListener('click',function() {
               console.log('outdiv');
          },false)
          mid.addEventListener('click',function() {
               console.log('middiv');
          },false)
          inner.addEventListener('click',function() {
               console.log('innerdiv');
          },false)
     </script>
</body>
</html>

将true改为false 设置为冒泡模式

此时点击innerdiv盒子输出顺序为:innerdiv、middiv、outdiv 从内向外传播