JavaScript中冒泡与事件委托

冒泡

事件触发后事件流的三个阶段按顺序依次是：

　　　　1、捕获阶段

　　　　2、目标阶段

　　　　3、冒泡阶段

大盒子包裹小盒子，两个盒子都分别添加点击事件，当点击小盒子，两个盒子的事件都会触发。

事件委托

下级元素委托上级元素，将子孙元素的事件注册委托给父级元素来代理：

　　　　1、给父元素注册点击事件

　　　　2、在事件函数中通过（事件对象.target ）获取最先触发的元素（这就是需要被操作的子元素）

　　　　3、通过 nodeName 检测是点击了子元素还是点到了父元素上

事件对象的 公共属性 和方法

属性：

　　　　事件对象.target　　→ →　　获取最先触发的元素

方法：

　　　　事件对象.preventDefault() ；阻止默认行为（有兼容性）

　　　　事件对象.stopPropagation() ；停止冒泡

重点

1、onmouseover支持冒泡

2、onmouseenter不支持冒泡

栗子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box1 {
      width: 500px;
      height: 500px;
      background: pink;
      margin:0 auto;
      overflow: hidden;

    }
    .box2 {
      width: 400px;
      height: 350px;
      background: yellow;
      margin: 50px auto;
      overflow: hidden;
      
    }
    .box3 {
      width: 300px;
      height: 200px;
      background: deeppink;
      margin: 50px auto;
      
    }
  </style>
</head>
<body>
  <div class="box1">box1
    <div class="box2">box2
      <div class="box3">box3 点击里面的盒子会冒泡到外面的盒子</div>
    </div>
  </div>
  <script>

      // click事件栗子
    var box1 = document.querySelector('.box1');
    box1.onclick = function(){
        alert('添加在box1上的事件');
    }

    // onmouseover事件栗子
    var box1 = document.querySelector('.box1');
    box1.onmouseover = function(){
        console.log('添加在box1上的事件');
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin: 100px auto;
            padding: 30px;
            text-align: center;
            background-color: rgba(255, 192, 203, 0.466);
        }

        p {
            width: 200px;
            height: 40px;
            line-height: 40px;
            background-color: deeppink;
        }
    </style>
</head>

<body>
    <h5>将鼠标移动到上面两个方块上</h5>
    <h5>父元素添加了 onmouseover 事件，子元素未添加，但是当鼠标滑过子元素，也同样会触发事件</h5>
    <div onmouseover="myOverFunction()">父
        <p id="demo">子</p>
    </div>
    <i>此栗子参考链接：https://blog.csdn.net/u012309349/article/details/50885149</i>


    <script>
        x = 0;
        function myOverFunction() {
            document.getElementById("demo").innerHTML = x += 1;
        }
    </script>
</body>

</html>

JavaScript中冒泡与事件委托

猜你喜欢