JavaScript中冒泡与事件委托

Posted kiss雪夜

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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中冒泡与事件委托的主要内容,如果未能解决你的问题,请参考以下文章

javascript事件监听与事件委托

JavaScript事件委托原理及Jquery中的事件委托

javaScript事件委托

冒泡事件与事件委托

整理之DOM事件阶段冒泡与捕获事件委托ie事件和dom模型事件鼠标事件

JavaScript 事件冒泡,事件捕获,事件委托