js冒泡机制

最新推荐文章于 2024-08-11 13:55:18 发布

不坠青云之志

最新推荐文章于 2024-08-11 13:55:18 发布

阅读量2.6k

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/qq_43279637/article/details/83052166

版权

前端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

js冒泡机制

冒泡：顾名思义，从最下面的位置某个元素开始往上面浮出。

在js中，是指从最下面的结点到具有触发条件的父节点依次触发。

什么时候会用到冒泡机制呢？

一般冒泡机制会用于addElementListener监听器中。

下面来看代码。

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div id="parent">
        <div id="child">
            <span id="span1">this is a demo(click me!!!)</span>
        </div>
    </div>
<script>
    document.getElementById("span1").addEventListener('click',function(){fun(this.id)},false);
    document.getElementById("child").addEventListener('click',function(){fun(this.id)},false);
    document.getElementById("parent").addEventListener('click',function(){fun(this.id)},false);
    function fun(a){
        alert(a);
    }
</script>
</body>
</html>

依次出现上面的三个提示框。

如果想实现点击的不是span不弹框的话，并且传递的参数是默认的话(默认参数是event事件，比如click，mouseover等)可以在触发的函数里用event.current.target或者event.target来判断点击的是不是点击的是span1或者span1的范围里.(event是传递的参数)。

如果你点击的是span1元素的话

event.current.targrt在指的是span1。而event.target指的是span以及他的两个父div。