事件冒泡：一个事件会顺着他的层级一直往上传，一直传到document上为止，即从盒模型上看是从内到外的过程。

例：

<!DOCTYPE html>
<html lang="en" onclick="alert('html')">
<head>
<meta charset="UTF-8">
<title>事件流</title>
<style type="text/css">
div{
padding: 100px;
}
</style>
</head>
<body onclick="alert('body')">
<div style="background: #ccc" onclick="alert(this.style.background)">
<div style="background: green" onclick="alert(this.style.background)">
<div style="background: red" onclick="alert(this.style.background)"></div>
</div>
</div>
</body>
</html>

仅点击了中间的红色部分，按顺序出现如下：

事件冒泡从最中间的红色div开始，一级一级往上。若直接点击灰色部分，会从出现提示灰色提示框开始一直到提示html框。

取消事件冒泡：event.cancelBubble=true

例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡实例</title>
<style type="text/css">
#div1{
width: 400px;
height: 500px;
background-color: #ccc;
display: none;
}
</style>
</head>
<body>
<input id="btn" type="button" value="显示"></input>
<div id="div1"></div>
<script type="text/javascript">
var oBtn=document.getElementById('btn');
var oDiv=document.getElementById('div1');

oBtn.onclick=function(ev){
var oEvent=ev||event; //未加之前 事件会冒泡到document上，div会一闪而过
oDiv.style.display='block';
oEvent.cancelBubble=true;
}
document.onclick=function(){
oDiv.style.display='none';
}
</script>
</body>
</html>

如果没有取消事件冒泡，点击按钮不会出现任何反应，其实并非没有反应，而是div一闪而过，点击之后div的disblock变为block，但是事件立即冒泡到document上，div的display又被改为none。

事件捕获：obj.setCapture  

将网页中所有的事件都集中于一个点，相当于是将所有页面上的事件集中于当前点击触发的事件。从盒模型上来看是从外到内的。

（ 可用于IE 解决有文字的情况下文 字或其他东西不被选中） 注：在div松开之后obj.releaseCapture();解开锁定的事件

例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件捕获</title>
<!-- 点击任意位置都可弹出a -->
</head>
<body>
<input id="btn" type="button" value="an"></input>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById('btn');
oBtn.onclick=function(){
alert('a');
}
oBtn.setCapture();
}
</script>
</body>
</html>

在IE下可看到无论点击什么地方，全部弹出a。

浅谈javascript中事件冒泡与事件捕获的更多相关文章

  1. 浅谈JavaScript中的闭包

    浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...

  2. 浅谈JavaScript中的null和undefined

    浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...

  3. 浅谈JavaScript中的正则表达式（适用初学者观看）

    浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...

  4. 浅谈JavaScript中的事件

    引言 Html页面与JavaScript之间的交互是通过事件来完成的.事件,就是文档或者浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(处理程序)来预订事件,以便事件发生时执行相应的代码.这在传 ...

  5. 通过一道笔试题浅谈javascript中的promise对象

    因为前几天做了一个promise对象捕获错误的面试题目,所以这几天又重温了一下promise对象.现在借这道题来分享下一些很基础的知识点. 下面是一个面试题目,三个promise对象捕获错误的例子,返 ...

  6. 浅谈JavaScript中的defer,async

    引言 开始重读<<JavaScript高级程序设计>>一书,看到关于JavaScript中关于defer.async的部分.网上查询了点资料,觉得蛮好的.现在总结下. defe ...

  7. 浅谈JavaScript中的定时器

    引言 使用setTimeout()和setInterval()创建的定时器可以实现很多有意思的功能.很多人认为定时器是一个单独的线程(之前我也是),但是JavaScript是运行在单线程环境中的,而定 ...

  8. 浅谈JavaScript中的Ajax

    引言 作为一名WEB开发者,我想Ajax技术是一定需要掌握的.你也许平时没有使用JavaScript真正的写过Ajax.但是你一定使用过JQuery里面的相关函数来进行异步调用.今天我们就来介绍下原生 ...

  9. 浅谈JavaScript中的内存管理

    一门语言的内存存储方式是我们学习他必须要了解的,接下来让我浅谈一下自己对他的认识. 首先说,JavaScript中的变量包含两种两种类型: 1)值类型或基本类型:undefined.null.numb ...

随机推荐

  1. SQLPlus 在连接时通常有四种方式

    1. sqlplus / as sysdba    操作系统认证,不需要数据库服务器启动listener,也不需要数据库服务器处于可用状态.比如我们想要启动数据库就可以用这种方式进入    sqlpl ...

  2. Python 对不均衡数据进行Over sample（重抽样）

    需要重采样的数据文件(Libsvm format),如heart_scale +1 1:0.708333 2:1 3:1 4:-0.320755 5:-0.105023 6:-1 7:1 8:-0.4 ...

  3. SQL Developer报错：Unable to find a Java Virtual Machine解决办法

    安装了64位的Oracle数据库以及32位的Oracle客户端,在开始菜单中第一次打开客户端的SQL Developer时提示输入java.exe的路径,我选择了Oracle数据库自带的jdk路径,确 ...

  4. uva 10817（状压dp)

    题意:就是有个学校要招老师．要让没门课至少有两个老师可以上．每个样样例先输入三个数字课程数量s,已经在任的老师数量,和应聘的老师数量．已经在任的一定要聘请． 思路是参考了刘汝佳书上的,关键如何状压. ...

  5. a链接中套a链接

    <a href="baidu.com"> <div> <div class="title">百度</div> & ...

  6. Python模块学习笔记

    1.作用域 私有private:用'_x'或'__xx'表示,如,_a,__ab; 公有public: 如 a,b; 特殊变量,可被直接引用,如:__author__,__name__,命名变量时一般 ...

  7. Jenkins构建时报错：No Space left on device

    Jenkins在自动化构建服务的同时也在消耗服务器的磁盘空间,如果构建的项目个数很多,而Jenkins 服务器磁盘空间又不是非常大的话,每隔一段时间磁盘空间就会爆满导致,就会出现磁盘空间不足无法构建的 ...

  8. 基于C#在WPF中使用斑马打印机进行打印【转】

    原文链接:http://ju.outofmemory.cn/entry/132476 最近在项目中接手了一个比较有挑战性的模块——用斑马打印机将需要打印的内容打印出来.苦苦折腾了两天,总算有所收获,就 ...

  9. 多项目开发下的dll文件管理

    阅读目录: DS01:为什么要对生成的dll文件进行管理? DS02:首先介绍以下两个DOS命令 DS03:第一种实现方法(xcopy) DS04:第二种实现方法(attrib) DS05:分享一个有 ...

  10. 练习sql语句的好去处——http://www.sqlzoo.cn/

    sql语句的编写需要按照实际的例子来练习. 如果自己来做准备,需要你自己搭好数据库,建好库和表,还要填入数据,最后自己想出题目和正确答案. 不过,现在我发现了一个好去处,http://www.sqlz ...