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 ...
随机推荐
- 对称加密和分组加密中的四种模式(ECB、CBC、CFB、OFB)
一. AES对称加密: AES加密 分组 二. 分组密码的填充 分组密码的填充 e.g.: PKCS#5填充方式 三. 流密码: 四. 分组密码加密中的四种模式: 3.1 ECB模式 优点: 1. ...
- object-c(oc)内存管理机制详解
1.内存的创建和释放 让我们以Object-c世界中最最简单的申请内存方式展开,谈谈关于一个对象的生命周期.首先创建一个对象: 1 2 3 //“ClassName”是任何你想写的类名,比如NSStr ...
- C++构造函数详解及显式调用构造函数
来源:http://www.cnblogs.com/xkfz007/archive/2012/05/11/2496447.html c++类的构造函数详解 ...
- 使用qsort对结构体的数据排序
1007 DNA 排序 题目大意: 序列“未排序程度”的一个计算方式是元素乱序的元素对个数.例如:在单词序列“DAABEC'”中,因为D大于右边四个单词,E大于C,所以计算结果为5.这种计算方法称为序 ...
- 记Flume-NG一些注意事项(不定时更新，欢迎提供信息)
这里只考虑flume本身的一些东西,对于JVM.HDFS.HBase等得暂不涉及.... 一.关于Source: 1.spool-source:适合静态文件,即文件本身不是动态变化的: 2.avro ...
- 如何将北京时间批量转为Unix时间？用Excel！
前面我们说过Unix时间戳转换怎样在Excel批量修改,有些人就想如果有特殊需求,那能不能批量将北京时间批量转成unix时间呢?能!用Excel就可以实现!跟ytkah一起试试吧. 将unix时间戳转 ...
- ADF成长记1--认识ADF
2014-07-08 近段时间由于公司项目需要,开始接触Oracle ADF.都说有事没事,上百度,但是对于IT技术而言,上百度还真是不一定好使,至于谷歌嘛,很不巧的进不去了.不过网上ADF的资料当真 ...
- IOS 中的CoreImage框架
IOS 中的CoreImage框架(framework) - time4cnblogs 时间 2014-03-15 00:24:00 博客园-所有随笔区原文 http://www.cnblogs. ...
- poj2993 翻转2996
Emag eht htiw Em Pleh Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2944 Accepted: ...
- HDOJ 1878 欧拉回路 nyoj 42一笔画问题
#include<cstdio> #include<cstring> ]; int find(int x) { if(visited[x]!=x) return find(vi ...