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 server数据库内置账户SA登录设置
SQL server数据库内置账户SA登录不了 设置SQL Server数据库给sa设置密码的时候 提示18456 解决步骤: 第二步:右击sa,选择属性: 第三步:点击状态选项卡:勾选授予 ...
- struct和class区别
转载来源:http://blog.sina.com.cn/s/blog_48f587a80100k630.html C++中的struct对C中的struct进行了扩充,它已经不再只是一个包含不同数据 ...
- php读取html并截取字符串
一般php采集代码能用的到,这里只是简单的实现代码. <?php $title='脚本学堂'; $hello='jbxue.com!'; $file=file_get_contents('htt ...
- 深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
在某些参考资料中是说这两个方法任选其一就可,但经我测试,必须两个方法同时使用,才不会再出现错误提示 PHP Warning: strtotime(): It is not safe to rely o ...
- Android设置背景图像重复【整理自网络】
1:在res/drawable文件下新建一个xml文件tool_bar_bg_repeat.xml比如为: <?xml version="1.0" encoding=&quo ...
- protected internal修饰符
见过这样的修饰符,但是没有仔细考虑过,今天做一个小练习. 先给出一个链接,别人在网上讨论的:http://wenku.baidu.com/view/4023f65abe23482fb4da4cfe.h ...
- Java集合的小抄
在尽可能短的篇幅里,将所有集合与并发集合的特征.实现方式.性能捋一遍.适合所有"精通Java",其实还不那么自信的人阅读. [转自:花钱的年华] 期望能不止用于面试时,平时选择数据 ...
- 全部快捷方式图标变成LNK文件怎么办
windowsLNK文件打开方式恢复 相信有些用户曾试过错误地把LNK文件打开方式更改其文件导致系统所有快捷方式都失效vista与Windows7系统还普遍使用时候相信大家会有点惊慌失措要紧下面只要大 ...
- Linq to XML 之XElement的Descendants方法的新发现
C#操作XML的方法有很多,但个人认为最方便的莫过于Linq to XML了,特别是XElement的Descendants方法是我最常用的一个方法. 这个方法可以根据节点名(Name)找到当前调用的 ...
- Jquery post 传递数组给asp.net mvc方法
以批量删除数据为例 做批量删除会需要传递要删除的数据ID数组 function RemoveLog(){ var postModel=[]; //遍历复选框获取要删除的数据ID 存放到数组中 $( ...