JS事件冒泡

最新推荐文章于 2024-07-25 09:24:40 发布

man_tutu

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量490

点赞数

分类专栏： JavaScript 文章标签： javascript 事件冒泡浏览器兼容

本文链接：https://blog.csdn.net/man_tutu/article/details/62424556

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

IE的事件流叫做事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。

上面这句话怎么解释呢？我们来看一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div>Click me!</div>
</body>
</html>

如果你点击了其中的div元素，那么这个click事件会按照如下顺序传播：

1、<div>
2、<body>
3、<html>
4、document

也就是说，click事件首先在 <div> 元素上发生，而这个元素就是我们单击的元素。然后，click事件沿着DOM树向上传播，在每一级节点上都会发生，直至传播到 document 对象。

注意：所有现代浏览器都支持事件冒泡，但在具体实现上还是有些差别。IE5.5及更早版本中的事件冒泡会跳过 <html> 元素（从 <body> 直接跳到 document）。IE9、Firefox、Chrome和Safari则将事件一直冒泡到windows对象。

好了，那么在理论的基础上，我写了如下实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        #father {
            width: 300px;
            height: 300px;
            background: orange;
            overflow: hidden;
        }

        #son {
            width: 100px;
            height: 100px;
            margin: 50px;
            background: red;
        }
    </style>
</head>
<body>
    <div id='father'>
        <div id="son"></div>
    </div>

    <script type="text/javascript">
        var father = document.getElementById('father');
        var son = document.getElementById('son');

        function stopPropagation(event) {
            e = window.event || event;

            if(e.stopPropagation) {
                e.stopPropagation();
            } else {
                e.cancelBubble = true;
            }
        }

        father.onclick = function(e) {
            alert('father');
            stopPropagation(e);
        }

        son.onclick = function(e) {
            alert('son');
            stopPropagation(e);
        }
    </script>
</body>
</html>

其中的这一段是为了兼容各浏览器而写的，希望各位看官注意：

function stopPropagation(event) {
    e = window.event || event;

    if(e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.cancelBubble = true;
    }
}

在这里，我们在点击 son 元素的时候，阻止了事件向上冒泡，这样，当我们点击 son 元素的时候就不会触发 father 元素的点击事件了。

注意，不是所有的事件都可以冒泡，其中blur、focus、load、unload不能冒泡。

好了，JS事件冒泡就写到这里了，希望各位看官能有所收获，照例，如有错误，欢迎指出：) 。