浅谈javascript中事件冒泡与事件捕获
事件冒泡:一个事件会顺着他的层级一直往上传,一直传到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。
最新文章
- Yii2 使用 Joins 查询
- 【原】使用SQLite打开本地*.db文件
- 两款web api 调试工具
- XenServer 使用笔记
- DECLARE CONTINUE HANDLER FOR NOT FOUND
- surface 其实是UEFI与BIOS并存,借用官网的进入方法(少有更改)
- Intellj idea 安装JUnit
- LoadRunner监控Unix、Windows方法及常用性能指标
- 浅谈localStorage、sessionStorage 与cookie
- Java中==与equals的区别及理解
- SIM900A设备在保加利亚无法正常使用GPRS问题
- 【redis持久化】redis持久化理解
- vim中的分屏操作
- Note 387206.1 ORA-15041: ASM diskgroup with unlike disks sizes
- sqlserver 触发器的运行关键字
- ORACLE中ESCAPE关键字用法
- TableLayout中collapseColumns,stretchColumns的介绍
- keras自定义padding大小
- Vue+Webpack配置css-loader时报错:Module build failed: Unknown word
- 在python3中使用urllib.request编写简单的网络爬虫
热门文章
- Java_I/O输入输出_使用输入输出流读取文件,将一段文字加密后存入文件,然后读取,将加密前与后的文件输出
- python——创建django项目全攻略(野生程序员到家养程序员的完美进化)
- DTD的作用
- 大家把做的公祭日的ps上传哦
- 289. Game of Life -- In-place计算游戏的下一个状态
- 深入浅出Mybatis系列(二)---配置简介(mybatis源码篇)
- iOS开发常用代码块(2)
- Create and Install Timer Job in MOSS 2007
- CentOS_7.2安装MySQL_5.7
- ajax无刷新删除、复制 THINKPHP