javascript事件流讲解（冒泡事件，捕获事件）

最新推荐文章于 2024-07-03 17:28:24 发布

大叶豌豆

最新推荐文章于 2024-07-03 17:28:24 发布

阅读量1k

点赞数 1

分类专栏： javascript 文章标签： JavaScript 事件流冒泡事件捕获事件

本文链接：https://blog.csdn.net/dayewandou/article/details/78310877

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近一个星期有点忙耶，而且这周末起来后头痛的厉害，所以拖到今天才更新文章，略略略….
在js中事件流的这个还有有一点点难理解的，而且日常用的少，特别容易忘记，很早之前就了解过，不过有点忘了，所以今天又整理一下，分享出来，有写的不足的地方大家可以留言哟！！

既然说道事件流就先说下事件流的概念：
当页面元素触发事件的时候，该元素的容器以及整个页面都会按照特定顺序响应该元素的触发事件，事件传播的顺序就叫做事件流。
每次听概念的是都都是云山雾绕的，哈，说白了，就是你点击一个DOM元素的时候，不止会触发DOM元素上的事件，也会触发包含DOM元素的上面的事件

事件流的分类：冒泡型事件和捕获事件

冒泡型事件（所有的浏览器都支持）
由明确的事件源到最不确定的事件源依次向上触发

案例：点击标签向上寻找事件源，如点击li→ul→div→body

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background: red;
        }
        ul{
            width: 300px;
            height: 300px;
            background: deeppink;
            float: left;
            margin: 50px;
        }
        li{
            width: 50px;
            height: 50px;
            background: lightpink;
            float: left;
            margin: 30px;
            list-style-type: none;
        }
    </style>
</head>
<body onclick="test(event,'我是body标签')">
    <div class="box" onclick="test(event,'我是div标签')">
        <ul onclick="test(event,'我是ul标签')">
            <li onclick="test(event,'我是li标签')">001</li>
            <li onclick="test(event,'我是li标签')">002</li>
            <li onclick="test(event,'我是li标签')">003</li>
        </ul>
    </div>
    <script>
        function test(event,aa){
            alert(aa);
        }
    </script>
</body>
</html>

显示效果如下：
这里写图片描述

当点击任意一个li时，会同时向上触发ul、div、body的事件，依次向上触发
在冒泡阶段依次为：div→body→html→document→window （由小到大）；
为什么称之为冒泡呢？看看下图，就知道了，O(∩_∩)O哈哈~
这里写图片描述
小鱼吐泡后，然后泡泡向上一点点的变大，就和点击了最小的元素，然后元素依次向上触发更外层的元素一样，是不是就很容易记住冒泡事件啦。

ok，说了冒泡事件，那接下来就说一下捕获事件吧
捕获事件（IE不支持，符合W3C标准支持火狐）
不确定的事件源到明确的事件源依次向下触发
addEventListener(事件，处理函数，false)；【冒泡】
addEventListener(事件，处理函数，true)；【捕获】

看看捕获的案例吧，捕获和冒泡的例子正好相反

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background: yellow;
        }
        .inner{
            width: 150px;
            height: 150px;
            background: orange;
            border-radius: 50%;
            float: left;
            margin: 75px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner"></div>
    </div>
    <script>
        var inner=document.querySelector('.inner');
        var box=document.querySelector('.box');
        inner.addEventListener('click',function(event){
            alert(this.className);
        },true);
        box.addEventListener('click',function(event){
            alert(this.className);
        },true);
    </script>
</body>
</html>