事件流

这个昵称很好记
94 阅读3分钟

事件流

在JS事件循环中，我们接触了很多JS自己触发的事件。但是当我们在网页上进行某些类型的交互时，也会触发事件，比如在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。当一个节点产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程称为DOM事件流 image.png

事件流阶段

  • 捕获阶段 (从根节点开始顺着目标节点构建一条事件路径，即事件由页面元素接收，逐级向下，到具体的元素)
  • 目标阶段 (到达目标节点，即元素本身)
  • 冒泡阶段 (从目标节点顺着捕获阶段构建的路径回去， 即跟捕获相反具体元素本身，逐级向上，到页面元素)

image.png

事件冒泡

当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window。

<div class="parents" id="parents"> 
     <div class="child" id="child"></div> 
</div>

    var parents = document.getElementById("parents");
    var child = document.getElementById("child");
    document.onclick = function (e) {
        alert("你点击了屏幕任何区域");
    };
    document.body.onclick = function (e) {
        alert("你点击了body区域");
    };
    parents.onclick = function (e) {
        alert("你点击了parents区域");
    };
    child.onclick = function (e) {
        alert("你点击了child区域");
    };

image.png

  • 当点击区域①的时候：会依次弹出你点击了child区域 、你点击了parents区域 、 你点击了body区域 、 你点击了屏幕任何区域 这四个弹框。

  • 当点击区域②的时候：会依次弹出你点击了parents区域 、 你点击了body区域 、 你点击了屏幕任何区域 这三个弹框。

  • 当点击区域③的时候：会弹出 你点击了body区域 、 你点击了屏幕任何区域 这两个弹框。

  • 当点击区域④的时候：就只弹出 你点击了屏幕任何区域 这一个弹框。

阻止事件冒泡

1.js阻止事件冒泡

我们用 e.stopPropagation() 这个方法添加到某事件函数里的末尾，就可以做到阻止冒泡事件。

但是IE8及以下不支持e.stopPropagation() 方法，所以就封装一个方法。

 function stopPropagation(e) {
        e = e || window.event;
        if(e.stopPropagation) {
            e.stopPropagation(); //W3C阻止冒泡方法
        } else {
            e.cancelBubble = true; //IE阻止冒泡方法
        }
    }

2.jq阻止事件冒泡

jq阻止事件冒泡就简单了，直接在事件函数里面添加 return false; 就行了。

 $("#parents").click(function () {
       alert("你点击了parents区域")
    });
    $("#child").click(function () {
        alert("你点击了child区域");
        return false;
    });

事件捕获

讲事件捕获之前先了解下addEventListener() 方法：

addEventListener()定义与用法

  • document.addEventListener() 方法用于向文档添加事件句柄。
  • 提示： 可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的 事件句柄。
  • 提示：使用 element.addEventListener() 方法为指定元素添加事件句柄。

与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。同样形象的比喻一下可以想象成警察逮捕屋子内的小偷，就要从外面一层层的进入到房子内。

document.addEventListener(event, function, useCapture);

1676990807376.png 从上面的表格中，可以看到参数值useCapture，为true的时候，事件在捕获过程中就会执行。 用代码感受下：

<div class="div1" id="div1">
    <div class="div2" id="div2"></div>
</div>

<script>
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    
    div1.addEventListener("click",function () {
        alert("你点击了div1")
    },false);  //false 在冒泡阶段执行

    div2.addEventListener("click",function () {
        alert("你点击了div2")
    },false);
</script>

当点击子元素 div2 的时候，会先弹出 你点击了div2 的弹框后，再弹出 你点击了div1 的弹框。

如果将div1的addEventListener方法中的最后的布尔参数值改成true，来看看什么效果

<script>
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    
    div1.addEventListener("click",function () {
        alert("你点击了div1")
    },true);  //false 在捕获阶段执行

    div2.addEventListener("click",function () {
        alert("你点击了div2")
    },false);
</script>>

当点击子元素 div2 的时候，会先弹出 你点击了div1 的弹框后，再弹出 你点击了div2 的弹框。,和之前的顺序就不一样了。

本文参与 腾讯云自媒体

avatar
文章
阅读
粉丝