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

<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. Codevs 3134 Circle

    3134 Circle 题目描述 Description 在一个圆上,有2*K个不同的结点,我们以这些点为端点,连K条线段,使得每个结点都恰好用一次.在满足这些线段将圆分成最少部分的前提下,请计算有多 ...

  2. IT兄弟连 JavaWeb教程 EL表达式获取对象的属性以及数组的元素

    使用${对象名.属性名} EL表达式语言可以使用点号运算符"."来访问对象的属性,例如表达式${customer.name}表示customer对象的name属性. 使用${对象名 ...

  3. 【OpenJ_Bailian - 2797】最短前缀(贪心)

    最短前缀 Descriptions: 一个字符串的前缀是从该字符串的第一个字符起始的一个子串.例如 "carbon"的字串是: "c", "ca&qu ...

  4. UITableView以及cell属性

    在ios的UI中UITableView是个常用且强大的控件 基本使用: 1>设置代理,一般把控制器设为代理:self.tableView.delegate = self; 2>遵守代理的协 ...

  5. Win7下Intellij开发Scala环境搭建

    1.Scala下载并安装 1.Scala的安装时需要依赖JDK的,目前我的电脑上,jdk是已经安装好了,这里就不再说明 2.在地址http://www.scala-lang.org/download/ ...

  6. 浅谈H5技术

    1.什么是H5:HTML5将成为HTML.XHTML以及HTML  DOM的新标准.目前仍处于完善之中.然而,大部分现代浏览器已经具备了某些HTML5支持. 2.背景:HTML5 是 W3C 与 WH ...

  7. UWP 画一个圆形头像

    经常需要做一个圆形头像的样式,like this 做法很简单,直接上xaml. <Ellipse Width=" Height="> <Ellipse.Fill& ...

  8. Hive_Hive的数据模型_数据存储

    Hive的数据模型_数据存储 web管理工具察看HDFS文件系统:http://<IP>:50070/ 基于HDFS没有专门的数据存储格式,默认使用制表符存储结构主要包括:数据库,文件,表 ...

  9. 081 Search in Rotated Sorted Array II 搜索旋转排序数组 ||

    这是 “搜索旋转排序数组”问题的跟进:如果数组元素允许重复,怎么办?这会影响到程序的时间复杂度吗?会有怎样的影响,为什么?假设按照升序排序的数组在预先未知的某个关键点上旋转.(例如, 0 1 2 4 ...

  10. Solr的SolrCloud与Master-slave主从模式对比

    第一印象 SolrCloud是Solr4.0引入的,主要应对与商业场景.它很像master-slave,却能自动化的完成以前需要手动完成的操作.利用ZooKeeper这个工具去监控整个Solr集群,以 ...