js 事件监听 冒泡事件
js 事件监听 冒泡事件 的取消
【自己写框架时，才有可能用到】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>事件编程</title>
<style type='text/css'> #div1 {
width:400px;
height:400px;
background:#ff0000;
}
#div2 {
width:300px;
height:300px;
background:blue;
}
#div3 {
width:200px;
height:200px;
background:yellow;
}
</style> <script>
//取消事件冒泡 //自己写框架时，才有可能用到
function stopBubble(event) {
if(window.event) {
window.event.cancelBubble = true;
} else {
event.stopPropagation();
}
}
window.onload = function() {
addEvent($('div1'),'click',function(){
alert('div1');
})
addEvent($('div2'),'click',function(event){
alert('div2');
stopBubble(event);
})
addEvent($('div3'),'click',function(event){
alert('div3');
stopBubble(event);
})
}
</script>
</head>
<body>
<div id='div1'>
<div id='div2'>
<div id='div3'></div>
</div>
</div>
</body>
</html>
js 事件监听 冒泡事件的更多相关文章
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- JS 中的事件绑定、事件监听、事件委托
事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有 ...
- JS 事件绑定、事件监听、事件委托详细介绍
原:http://www.jb51.net/article/93752.htm 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代 ...
- JS 中的事件绑定、事件监听、事件委托是什么？
在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等.这些名词是什么意思呢,有什么作用呢? 事件绑定 要想让 JavaScri ...
- javascript事件监听与事件委托
事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件 ...
- js事件监听机制(事件捕获)总结
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- js事件监听机制(事件捕获)
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- JS事件流、事件监听、事件对象、事件委托
JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...
- js input监听兼容事件
$('#phoneNumber').on('input',function() { var valueP = $(this).attr('value'); if(valueP.length == 11 ...
随机推荐
- js闭包理解
js闭包的作用是使函数外可以访问函数内部的变量,是通过 在函数内部 定义 访问函数内变量 的函数实现的,内部的一个函数产生一个闭包 function a() { var i=0; return fun ...
- C++中debug和release的区别 . 转载
vc中debug和release的不同 收藏 在使用VC开发软件的过程中,正当要享受那种兴奋的时候突然发现:release与debug运行结果不一致,甚至出错,而release又不方便调试,真的是当 ...
- apache mysql 正常启动 打开php网页延时
金山毒霸或者升级精灵修改了WINSOCK导致的.由于我电脑上也安装了金山毒霸,而且最近几天也升级过了,应该是同样的问题.于是搜索到恢复Winsock的方法: netsh winsock reset 使 ...
- derby数据库操作比较难理解的错误及解决方法大全
一.插入(INSERT时报错) 1.错误:java.sql.SQLIntegrityConstraintViolationException: 列“test”无法接受空值. 可能原因:建表时test列 ...
- sh脚本学习之: sh脚本 、sed、awk
sh脚本 sh命令的批处理文件,支持更复杂的逻辑. Shell中的变量 参数 $0 当前脚本路径 $1....$n 脚本执行对应的第n个参数 条件判断 文件判断 test [op] path e存在 ...
- Spring+Quartz实现定时任务的配置方法
1.Scheduler的配置 <bean class="org.springframework.scheduling.quartz.SchedulerFactoryBean" ...
- windows路径操作API函数
备用,方便查找: PathRemoveArgs 去除路径的参数 PathRemoveBackslash 去除路径最后的反斜杠"\" PathAddBackslash 在 ...
- SGU 170 Particles（规律题）
题目链接:http://acm.sgu.ru/problem.php?contest=0&problem=170 解题报告:输入两个由'+'和'-'组成的字符串,让你判断第二个串能不能由第一个 ...
- Unity3d 经验小结
Unity3d 经验小结 文本教程 你是第2541个围观者 0条评论 供稿者:Jamesgary 标签:unity3d教程 Fbx.贴图导入Unity时的注意事项: 在导出Fbx之前,Maya中已 ...
- C#装箱和拆箱（值类型和引用类型之间的转换）
面向对象编程中,封箱指把非对象类型的数值或数据,包装成对象类型反之,拆箱指把对象类型拆成非对象的数值或数据. 例子:定义一个Circle 类 class Circle { double radius; ...