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

来源：互联网发布：如何制作mac os启动盘编辑：程序博客网时间：2024/06/05 07:24

最近一个星期有点忙耶，而且这周末起来后头痛的厉害，所以拖到今天才更新文章，略略略….
在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>

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

当我们点击橘色的这个圆的时候，就会发现不仅触发了inner的事件，同时也出发了box的事件，这就是捕获事件

捕获事件传播顺序：window→document→html→body→div(由大到小)
为啥叫捕获事件呢？豌豆想了想，这就像在我们下网捕获小鱼的时候，是不是从最上面下网，然后顺着网越来越向下，直到捕捉到小鱼呢？
这里写图片描述
也不知道当时起名字的时候，是不是也是这么想的，

今天就写到这里，后面也还有阻止事件流的分享，有兴趣的可以看看哟！

阅读全文

0 0