事件冒泡事件捕获分别由微软网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。

<div id='aa' click='po'>
<p id='bb' click='on'>点击</p>
</div>

  上面两个点击事件如果点击的时候,到底谁会被先触发呢,为了解决这个问题微软和网景提出了两种几乎完全相反的概念。

事件冒泡

微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面。也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象。

因此在事件冒泡的概念下在p元素上发生click事件的顺序应该是p -> div -> body -> html -> document

事件捕获

网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反,事件会从最外层开始发生,直到最具体的元素。

因此在事件捕获的概念下在p元素上发生click事件的顺序应该是document -> html -> body -> div -> p

后来 w3c 采用折中的方式,平息了战火,制定了统一的标准——先捕获再冒泡

冒泡的案例

<div id="s1">s1
<div id="s2">s2</div>
</div>
<script>
s1.addEventListener("click",function(e){
console.log("s1 冒泡事件");
},false);
s2.addEventListener("click",function(e){
console.log("s2 冒泡事件");
},false);
</script>

  

捕获的案例

<div id="s1">s1
<div id="s2">s2</div>
</div>
<script>
s1.addEventListener("click",function(e){
console.log("s1 捕获事件");
},true);
s2.addEventListener("click",function(e){
console.log("s2 捕获事件");
},true);
</script>

  当事件冒泡和捕获在一起出现的时候

<div id="s1">s1
<div id="s2">s2</div>
</div>
<script>
s1.addEventListener("click",function(e){
console.log("s1 冒泡事件");
},false);
s2.addEventListener("click",function(e){
console.log("s2 冒泡事件");
},false); s1.addEventListener("click",function(e){
console.log("s1 捕获事件");
},true); s2.addEventListener("click",function(e){
console.log("s2 捕获事件");
},true);
</script>

  

  • 对于非被点击dom节点则先执行捕获在执行冒泡

  • 对于被点击的dom节点则是先执行先注册的事件,无论冒泡还是捕获

事件冒泡和捕获,衍生出事件委托,因为当你点击子元素的时候,实际上走的是父组件的事件

<ul id="list">
<li>111</li>
<li>2222</li>
</ul>

  点击子元素的时候,由父元素去代为执行,能减少事件输出,代码的编写量

取消默认事件

w3c 的方法是 e.preventDefault(),IE 则是使用 e.returnValue = false;

取消默认事件,还可以用return来进行阻止

阻止冒泡的事件

w3c 的方法是 e.stopPropagation(),IE 则是使用 e.cancelBubble = true

IE9 之前的IE不支持 stopPropagation() 方法。相反,IE事件对象有一个 cancleBubble 属性,设置这个属性为 true 能阻止事件进一步传播。( IE8 及之前版本不支持事件传播的捕获阶段,所以冒泡是唯一待取消的事件传播。)

冒泡事件案例:

<div id='div' onclick='alert("div");'>
<ul onclick='alert("ul");'>
<li onclick='alert("li");'>test</li>
</ul>
</div>

  正常情况下,li>ul>div,这就是正常的冒泡的事件

阻止冒泡的事件:

window.event? window.event.cancelBubble = true : e.stopPropagation();

  阻止冒泡事件,案例

<html>
<head>
<style>
#a{
width: 300px;
height: 300px;
background: pink;
}
#b{
width: 200px;
height: 200px;
background: blue;
}
#c{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body> <div id="a">
<div id="b">
<div id="c"></div>
</div>
</div>
<script>
var a = document.getElementById("a"),
b = document.getElementById("b"),
c = document.getElementById("c");
c.addEventListener("click", function (event) {
console.log("c1");
event.stopImmediatePropagation();
// 注意第三个参数没有传进 false , 因为默认传进来的是 false
//,代表冒泡阶段调用,个人认为处于目标阶段也会调用的
});
c.addEventListener("click", function (event) {
console.log("c2");
}, true);
b.addEventListener("click", function (event) {
console.log("b");
}, true);
a.addEventListener("click", function (event) {
console.log("a1");
}, true);
a.addEventListener("click", function (event) {
console.log("a2")
});
a.addEventListener("click", function (event) {
console.log("a3");
event.stopImmediatePropagation();
}, true);
a.addEventListener("click", function (event) {
console.log("a4");
}, true);
</script>
</body>
</html>

当时写博客的时候忘了写阻止冒泡的事件了,多谢老铁提醒!!!

js事件(事件冒泡与事件捕获)的更多相关文章

  1. js之捕捉冒泡和事件委托

     以下为转载内容 一.事件流(捕获,冒泡)   事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体 ...

  2. position布局影响点击事件以及冒泡获取事件目标

    在编写功能时总是会出现很多意想不到的问题,现在就讲讲我遇到的两个问题,通过举一个相似的例子来解说. <1> 元素互相独立,不存在包含于被包含 选择城市的按钮,为它绑定点击事件,点击后就弹出 ...

  3. 初始js闭包&事件的冒泡和捕获&EVENT对象

    一.初识闭包 function a(){   var n = 0;   this.inc = function () {     n++;     console.log(n);   }; } var ...

  4. js 事件冒泡、事件捕获、stopPropagation、preventDefault

    转自:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: ...

  5. js之事件冒泡和事件捕获

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...

  6. js之事件冒泡和事件捕获详细介绍

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...

  7. js之事件冒泡和事件捕获介绍

    链接:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. (2)捕获型事件 ...

  8. 关于js事件冒泡和时间捕获

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...

  9. [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流

    面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...

随机推荐

  1. 花花的森林(倍增,LCA

    花花的森林,嗯,这是一篇正经的题解. 模拟考的时候没有看出来要怎么求啊,暴力地树形DP.换根.合并.求直径.居然也险险地拿到了80分,不过我们要正经地想正解. 容易想到我们可以让时光倒流,让空间扭转, ...

  2. SpringBlade 2.0-RC3 发布,全新的微服务开发平台

    经过了十天的艰苦奋斗,SpringBlade 2.0-RC3发布了,此版本增加了很多有用的功能,距离正式版本更近一步! SpringBlade简介: SpringBlade 2.0 是一个基于 Spr ...

  3. js-metisMenu

    metisMenu是js的菜单插件,可以实现可折叠的二级菜单效果. 1 bootstrap折叠(Collapse) 直接引用bootstrap.js或者bootstrap.min.js就可以支持该插件 ...

  4. SRE思想

    1 规模效应 业务越庞大,服务器就越多,服务越多,就越需要拆分成分布式架构.架构越复杂,对运维的能力要求就越高.出错的概率就越大,运维的工作量就越大.因此就要更多开发提升效率的工具. 而在小企业,业务 ...

  5. laravel使用swoole

    参考 参考2 另外主要用到artisan 首先创建SwooleCommand.php <?php namespace App\Console\Commands; use App\Http\Con ...

  6. 利用Common-Fileupload上传文件图片

    一,介绍 common-fileupload是appache的开源组件,基于该组件可以轻松实现文件上传的功能,strust框架的文件上传功能也是基于该组件. 二,使用 1,导入两个jar包:commo ...

  7. Dubbo理论知识

    本文是作者根据官方文档以及自己平时的使用情况,对 Dubbo 所做的一个总结.如果不懂 Dubbo 的使用的话,可以参考我的这篇文章<超详细,新手都能看懂 !使用SpringBoot+Dubbo ...

  8. 图像分类丨浅析轻量级网络「SqueezeNet、MobileNet、ShuffleNet」

    前言 深度卷积网络除了准确度,计算复杂度也是考虑的重要指标.本文列出了近年主流的轻量级网络,简单地阐述了它们的思想.由于本人水平有限,对这部分的理解还不够深入,还需要继续学习和完善. 最后我参考部分列 ...

  9. Navicate Premium连接Oracle数据库报错

    Navicat Premium连接MySQL数据库没有问题,在连接Oracle数据库的时候报错,提示:ORA-28547:connection to server failed,probable Or ...

  10. 開玩樹莓派(一):安裝Raspbian系統

    目錄: 開玩樹莓派(一):安裝Raspbian系統 開玩樹莓派(二):配置IP,實現無顯示器局域網內Putty連接和RDP遠程 開玩樹莓派(三):Python編程 開玩樹莓派(四):GPIO控制和遠程 ...