js事件(事件冒泡与事件捕获)
事件冒泡
和事件捕获
分别由微软
和网景
公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。
<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事件(事件冒泡与事件捕获)的更多相关文章
- js之捕捉冒泡和事件委托
以下为转载内容 一.事件流(捕获,冒泡) 事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体 ...
- position布局影响点击事件以及冒泡获取事件目标
在编写功能时总是会出现很多意想不到的问题,现在就讲讲我遇到的两个问题,通过举一个相似的例子来解说. <1> 元素互相独立,不存在包含于被包含 选择城市的按钮,为它绑定点击事件,点击后就弹出 ...
- 初始js闭包&事件的冒泡和捕获&EVENT对象
一.初识闭包 function a(){ var n = 0; this.inc = function () { n++; console.log(n); }; } var ...
- js 事件冒泡、事件捕获、stopPropagation、preventDefault
转自:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: ...
- js之事件冒泡和事件捕获
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...
- js之事件冒泡和事件捕获详细介绍
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...
- js之事件冒泡和事件捕获介绍
链接:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. (2)捕获型事件 ...
- 关于js事件冒泡和时间捕获
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...
- [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流
面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...
随机推荐
- Codevs 3134 Circle
3134 Circle 题目描述 Description 在一个圆上,有2*K个不同的结点,我们以这些点为端点,连K条线段,使得每个结点都恰好用一次.在满足这些线段将圆分成最少部分的前提下,请计算有多 ...
- IT兄弟连 JavaWeb教程 EL表达式获取对象的属性以及数组的元素
使用${对象名.属性名} EL表达式语言可以使用点号运算符"."来访问对象的属性,例如表达式${customer.name}表示customer对象的name属性. 使用${对象名 ...
- 【OpenJ_Bailian - 2797】最短前缀(贪心)
最短前缀 Descriptions: 一个字符串的前缀是从该字符串的第一个字符起始的一个子串.例如 "carbon"的字串是: "c", "ca&qu ...
- UITableView以及cell属性
在ios的UI中UITableView是个常用且强大的控件 基本使用: 1>设置代理,一般把控制器设为代理:self.tableView.delegate = self; 2>遵守代理的协 ...
- Win7下Intellij开发Scala环境搭建
1.Scala下载并安装 1.Scala的安装时需要依赖JDK的,目前我的电脑上,jdk是已经安装好了,这里就不再说明 2.在地址http://www.scala-lang.org/download/ ...
- 浅谈H5技术
1.什么是H5:HTML5将成为HTML.XHTML以及HTML DOM的新标准.目前仍处于完善之中.然而,大部分现代浏览器已经具备了某些HTML5支持. 2.背景:HTML5 是 W3C 与 WH ...
- UWP 画一个圆形头像
经常需要做一个圆形头像的样式,like this 做法很简单,直接上xaml. <Ellipse Width=" Height="> <Ellipse.Fill& ...
- Hive_Hive的数据模型_数据存储
Hive的数据模型_数据存储 web管理工具察看HDFS文件系统:http://<IP>:50070/ 基于HDFS没有专门的数据存储格式,默认使用制表符存储结构主要包括:数据库,文件,表 ...
- 081 Search in Rotated Sorted Array II 搜索旋转排序数组 ||
这是 “搜索旋转排序数组”问题的跟进:如果数组元素允许重复,怎么办?这会影响到程序的时间复杂度吗?会有怎样的影响,为什么?假设按照升序排序的数组在预先未知的某个关键点上旋转.(例如, 0 1 2 4 ...
- Solr的SolrCloud与Master-slave主从模式对比
第一印象 SolrCloud是Solr4.0引入的,主要应对与商业场景.它很像master-slave,却能自动化的完成以前需要手动完成的操作.利用ZooKeeper这个工具去监控整个Solr集群,以 ...