JavaScript入门之事件流及事件冒泡

JS事件流与冒泡详解

最新推荐文章于 2022-05-06 10:00:32 发布

YXGR

最新推荐文章于 2022-05-06 10:00:32 发布

阅读量158

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 前端

本文链接：https://blog.youkuaiyun.com/weixin_42777688/article/details/90748094

前端同时被 2 个专栏收录

20 篇文章

订阅专栏

JavaScript

16 篇文章

订阅专栏

本文深入解析JavaScript中事件流的概念，包括事件冒泡与捕获机制，通过实例演示事件冒泡的过程及其可能带来的影响，并提供阻止事件冒泡的方法。

什么是JS的事件流

当某个事件执行时(子元素和父元素都绑定了相同的事件)从子元素向父元素触发或者从父元素向子元素触发整个过程称为事件流
子元素向父元素触发称为事件的冒泡
父元素向子元素触发称为事件的捕获
当冒泡和捕获同时存在时会先触发事件捕获

事件冒泡

当子元素和父元素都绑定了相同的事件时执行完子元素的事件函数后会继续执行父元素的事件函数直到执行到document的事件函数才会停止

冒泡例子

CSS代码

#warp{
	  width: 400px;
	  height: 400px;
	  background: skyblue;
	  margin: 50px auto;
}
#box{
   	  width: 200px;
      height: 200px;
      margin: 0 auto;
      background: hotpink;
}

HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="author" content="YXGR">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="warp"> <div id="box"> </div> </div>
</body>
</html>

JavaScript代码

var box = document.getElementById("box");
var warp = document.getElementById("warp");

box.onclick = function () {
   	console.log("box");
}
warp.onclick = function () {
  	 console.log("warp");
}
document.onclick = function () {
   	console.log("document");
}

当点击了box元素时控制台分别输出了 box warp document
当点击了warp元素时控制台分别输出了warp document
当点击了document时控制台之输出了document

冒泡带来的影响

当我们希望各个元素的事件独立执行时冒泡会干扰我们的效果
例如我想点击某个元素的时候让指定元素显示当点击页面空白位置的时候让该元素隐藏

#warp{
	  width: 400px;
	  height: 400px;
	  background: skyblue;
	  margin: 50px auto;
	  display:none;
}
#box{
   	  width: 200px;
      height: 200px;
      margin: 0 auto;
      background: hotpink;
}

HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="author" content="YXGR">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="warp">

    </div>
    <div id="box">

    </div>
</body>
</html>

JavaScript代码

var box = document.getElementById("box");
var warp = document.getElementById("warp");

box.onclick = function () {
    warp.style.display = "block";
}
document.onclick = function () {
    warp.style.display = "none";
}

此时点击box之后warp并不会显示出来原因是当点击box之后执行了box的事件函数让warp显示出来了
紧接着事件冒泡到了document上触发了document的事件函数warp立马又隐藏了

阻止事件冒泡

当事件冒泡带来了我们不希望出现的bug时就需要去阻止事件冒泡
CSS和HTML代码不变下面是JavaScript代码

var box = document.getElementById("box");
var warp = document.getElementById("warp");

box.onclick = function (eve) {
    var e = eve || event;
    e.stopPropagation?e.stopPropagation():e.cancelBubble = true;
    //e.stopPropagation()只在高版本浏览器有效(IE8以上)IE8以下使用e.cancelBubble = true
    warp.style.display = "block";
}
document.onclick = function () {
    warp.style.display = "none";
}