什么是事件冒泡机制?

什么是 事件冒泡?

冒泡的机制:

什么是事件冒泡机制?_第1张图片

这气泡就相当于我们的事件,鱼就是事件源,而水则相当于我们的整个dom树;事件从dom 树的底层 层层往上传递,直至传递到dom的根节点。

栗子 :

样式布局

什么是事件冒泡机制?_第2张图片

代码结构

什么是事件冒泡机制?_第3张图片

js代码

什么是事件冒泡机制?_第4张图片

整体代码 :

<!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>
</head>
// 样式
<style>
    #body {
        background-color: blue;
        width: 100%;
        height: 100%;
    }

    #box1 {
        background-color: brown;
        width: 500px;
        height: 500px;
    }

    #box2 {
        background-color: chartreuse;
        width: 300px;
        height: 300px;

    }

    #span {
        text-align: center;
        line-height: 100px;
        background-color: cornsilk;
        width: 100px;
        height: 100px;
    }
</style>
// 结构
//  定义一个html, 里面有三个的元素:div1,div2, span,div2包含span,div1 包含div2;而它们都在body 下:
<body id="body">
    <div id="box1" class="box1">
        <div id="box2" class="box2">
            <span id="span">我是 span.</span>
        </div>
    </div>
// js
// !!! 
// 获取body添加 click 事件,当body捕获到event事件时,打印出 事件发生的时间和 触发事件的节点信息:
<script>
  	window.onload = function () {
        document.getElementById("body").addEventListener("click", a);
     }

    function a(event) {
       console.log("时间:" + new Date(event.timeStamp) + " 产生事件的节点:" + event.target.id + "  当前节点:" + event.currentTarget.id);
        }
</script>

</body>

</html>
依次点击 span – > div2 --> div1–> body 打印出来的结构

什么是事件冒泡机制?_第5张图片

所以得出 无论是body,还是 body 的子元素div1,还是 div的子元素div2,还有 span, 当这些元素被点击click时,都会产生click事件,并且body都会捕获到,然后调用相应的事件处理函数。就像水中的气泡从底往上冒一样,事件也会往上传递。

怎么阻止事件冒泡?

我们现在想实现这样的功能,在div1 点击的时候,弹出 “你好,我是最外层div。”,点击div2 的时候,弹出 “你好,我是第二层div”;点击span 的时候,弹出"您好,我是span。"。

由此我们会有下面的javascript片段:

什么是事件冒泡机制?_第6张图片

预期上述代码会单击span 的时候,会出来一个弹出框 “您好,我是span。” 是的,确实弹出了这样的对话框:

什么是事件冒泡机制?_第7张图片

但是 不仅仅会产生这个对话框,当点击确定后,会依次弹出下列对话框:

什么是事件冒泡机制?_第8张图片
什么是事件冒泡机制?_第9张图片

这不是我想要的! 怎么才能让他点啥是啥呢?

这就要拿出 event.stopPropagation() 来阻止事件冒泡了

什么是事件冒泡机制?_第10张图片

这样之后就是点什么是什么了

event.stopPropagation() 取消事件冒泡,即当某些节点取消冒泡后,事件不会再传递; 但是吧 他必要把每一个子元素的都阻止才行, 要不然某一个子元素没有阻止,他是信息会跑到他的上一层元素上

第二种

事件包含最初触发事件的节点引用 和 当前处理事件节点的引用,那如果节点只处理自己触发的事件即可,不是自己产生的事件不处理。
event.target 引用了产生此event对象的dom 节点,而event.currrentTarget 则引用了当前处理节点,我们可以通过这 两个target 是否相等。
为 true的时候 ,就执行相应的处理函数
为 flase的时候,就不执行相应的处理函数

什么是事件冒泡机制?_第11张图片

元素收到事件后,判断事件是否符合要求,然后做相应的处理,然后事件继续冒泡往上传递;
这样的写 就要为 为每一个元素都增加了事件监听处理函数,事件的处理逻辑都很相似 ,每一个都要加一个判断才行, 代码太多了 很烦

你可能感兴趣的:(JavaScript)