事件冒泡：一个事件会顺着他的层级一直往上传，一直传到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. ubuntu 跟xshell的问题

    有2个分析: 1:是windos的防火墙没有关闭 2:是虚拟机没有安装sshd服务器 ubuntu在CLI界面下输入:dpkg -l |grep ssh 因为是我安装过的sshd server   要 ...

  2. HashMap,LinkedHashMap,TreeMap的区别

    Map主要用于存储健值对,根据键得到值,因此不允许键重复(重复了覆盖了),但允许值重复. Hashmap 是一个最常用的Map,它根据键的HashCode 值存储数据,根据键可以直接获取它的值,具有很 ...

  3. 如何修改file控件

    在移动web开发过程中,常常会用到input file这控件,但css不能修改其样式往往让开发者很头疼,直接把他放到页面上又不美观: 下面介绍的方法,可以将该控件的显示样式替换成一个图标:   该方法 ...

  4. 使用curl传递cookie错误的问题

    工作中发现一个问题, 通过curl调用接口传递cookie操作用户的数据, 接口的程序解析不了cookie中的数据. 经过排查发现curl发送的cookie数据为 TZ+Gn+rEk+6G4d 而接口 ...

  5. vue 中使用 AJAX获取数据的方法

    在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...

  6. linux 下 PHP Notice: session_start(): ps_files_cleanup_dir 报错 问题剖析

    如果在ubuntu/Debian下, 采用apt安装的PHP, 那么在使用Session的时候, 就可能会有小概率遇到这个提示. 代码如下: PHP Notice: session_start(): ...

  7. linux桌面的安装

    在CentOS 7中提供了两种桌面"GNOME DESKTOP" 和 "KDE Plasa Workspaces",我们以安装"GNOME DESKT ...

  8. C# 4.0 新特性dynamic (待学习)

    随便翻看了一下dynamic,在网上拷贝了一个例子,先贴出来等有空了再慢慢消化 static void Main(string[] args) { dynamic d = new MyDynamicO ...

  9. daydayup2 codeforces143D

    这题很考察分析 题意:让你构造n*m的矩阵,使得不存在两个点的距离的平方为5 1若n=1  ,答案为m 2若m=1,答案为n 3若n=2 则这样 110011001100.. 110011001100 ...

  10. C盘更改文件夹权限

    现象:点“安全”添加用户并允许所有权限后,点击“应用”,弹出“无法保存对xxxxx权限所在的更改.拒绝访问”对话框 解决方法:点击“安全”-->"高级"-->“所有者” ...