JS事件（事件冒泡和事件捕获）
事件流：描述的是在页面中接收事件的顺序
事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）
事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件 DOM中：用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener()。他们都接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值(事件处理的时候)[true:事件捕获时;false:事件冒泡时]
DOM中的事件对象：
type属性 用于获取事件类型;
target属性 用于获取事件目标
stopPropagation()方法 用于阻止事件冒泡
preventDefault()方法 用于阻止事件的默认行为 IE中：attachEvent()和detachEvent()，接收相同的两个参宿：事件处理程序的名称和事件处理程序的函数。
IE中的事件对象：
type属性 用于获取事件类型
srcElement属性 用于后去事件目标
cancelBubble属性 用于阻止事件冒泡[true:阻止事件冒泡;false:不阻止事件冒泡;]
returnValue属性 用于阻止事件的默认行为 [false:阻止事件的默认行为;] 测试例子： <html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>JS事件测试</title>
<script>
var eventUtil = {
//添加事件
addHandler: function(element, type, handler){
if(element.addEventListener){
//非IE下
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
element.attachEvent('on' + type, handler);
}else{
//IE下
element['on' + type] = handler;
}
},
//删除事件
removeHandler: function(element, type, handler){
if(element.removeEventListener){
//非IE下
element.removeEventListener(type, handler, false);
}else if(element.detachEvent){
element.detachEvent('on' + type, handler);
}else{
//IE下
element['on' + type] = null;
}
},
//获取目标元素
getElement: function(event){
return event.target || event.srcElement;
},
//阻止默认行为
preventDefault: function(event){
if(event.preventDefault){
//非IE下
event.preventDefault();
}else{
//IE下
event.returnValue = false;
}
},
//阻止事件冒泡
stopPropagation: function(event){
if(event.stopPropagation){
//非IE下
event.stopPropagation();
}else{
//IE下
event.cancelBubble = true;
}
}
};
var btn = null, div = null;
window.onload = function(){
btn = document.getElementById('id');
eventUtil.addHandler(document.getElementById('divId'), 'click', showDivMsg); eventUtil.addHandler(document.getElementById('addId'), 'click', addEvent);
eventUtil.addHandler(document.getElementById('removeId'), 'click', removeEvent);
} function addEvent(){
eventUtil.addHandler(btn, 'click', showMsg);
} function removeEvent(){
eventUtil.removeHandler(btn, 'click', showMsg);
} function showMsg(event){
alert(eventUtil.getElement(event).getAttribute('data') + '事件');
eventUtil.preventDefault(event);
eventUtil.stopPropagation(event);
} function showDivMsg(){
alert("DIV事件");
} </script> </head>
<body>
<div id="divId" data="事件冒泡">
<a id="id" href="http://baidu.com" data="默认行为">跳转</a>
<span data="span">测试事件冒泡与事件捕获</span>
<input type="button" value="添加按钮" id="addId" data="添加"/>
<input type="button" value="删除按钮" id="removeId" data="删除"/>
</div>
</body>
</html>
JS事件（事件冒泡和事件捕获）的更多相关文章
- js之捕捉冒泡和事件委托
以下为转载内容 一.事件流(捕获,冒泡) 事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体 ...
- position布局影响点击事件以及冒泡获取事件目标
在编写功能时总是会出现很多意想不到的问题,现在就讲讲我遇到的两个问题,通过举一个相似的例子来解说. <1> 元素互相独立,不存在包含于被包含 选择城市的按钮,为它绑定点击事件,点击后就弹出 ...
- 初始js闭包&事件的冒泡和捕获&EVENT对象
一.初识闭包 function a(){ var n = 0; this.inc = function () { n++; console.log(n); }; } var ...
- js 事件冒泡、事件捕获、stopPropagation、preventDefault
转自:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: ...
- js之事件冒泡和事件捕获
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...
- js之事件冒泡和事件捕获详细介绍
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...
- js之事件冒泡和事件捕获介绍
链接:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. (2)捕获型事件 ...
- 关于js事件冒泡和时间捕获
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...
- js事件（事件冒泡与事件捕获）
事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. <div id='aa' click='po'> <p id='bb' cli ...
- [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流
面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...
随机推荐
- SQL联合查询中的关键语法（转）
联合查询效率较高.以下例子来说明联合查询的好处 t1表结构(用户名,密码) userid int username varchar(20) password ...
- JS input文本框禁用右键和复制粘贴功能的代码
代码如下: function click(e) { if (document.all) { ||||) { oncontextmenu='return false'; } } if (document ...
- C++安装失败解决办法
法一:删除注册表中的HKY_LOCAL_MACHINE\\SYSTEM|ControlSet001\\Services\\VSS,卸载重装.法二:点击 setup目录下的 wpie15.exe .. ...
- mongodb的常用操作
对于nosql之前工作中有用到bekerlydb,最近开始了解mongodb,先简单写下mongodb的一些常用操作,当是个总结: 1.mongodb使用数据库(database)和集合(collec ...
- ASP专栏——ASP生成静态文件（用于大量文章）
对于Web开发人员来说,生成静态文件这个概念并不陌生. 对于Web开发来说,如何能避免客户端访问时不停的查询数据库?现在比较常用的有两种方法,一种是使用缓存技术,将查询出来的结果缓存至缓存框架中,以后 ...
- java dom4j解析xml用到的几个方法
1． 读取并解析XML文档: SAXReader reader = new SAXReader(); Document document = reader.read(new File(fileName ...
- hdu 5545 The Battle of Guandu spfa最短路
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5545 题意:有N个村庄, M 个战场: $ 1 <=N,M <= 10^5 $; 其中曹 ...
- sysfs分析
Linux设备模型——设备驱动模型和sysfs文件系统解读 内核版本:2.6.30 1. What is sysfs? 个人理解:sysfs向用户空间展示了驱动设备的层次结构.我们都知道设备和对应 ...
- C# Windows - 创建控件
VS提供了一个项目类型Windows Control Library,使用它可以创建自己的控件. 可以开发两种不同类型的自定义控件: 用户或组合控件:这种控件是根据现有控件的功能创建一个新控件.这类控 ...
- C++(MFC)编程一些注意事项
一·书写问题 1.括号:左右大括号最好都放在左侧,这样可以很清楚大括号的看清配对情况以及作用域,便于检查也不易出错. 2.强制转换:强制转换表达式时一定要加括号,否则可能只转换了表达式中的单个量,可能 ...