事件流：描述的是在页面中接收事件的顺序
事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）
事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件 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 对象,当事件 ...
随机推荐
-
VC++ 回调函数及使用方法(转)
转载:http://blog.csdn.net/vsooda/article/details/7435801 转载:http://blog.csdn.net/lincyang/article/deta ...
-
【gsl】生成随机数
来自:http://hsxqwanting.blog.163.com/blog/static/16945437201301042830815/ 使用GSL生成随机数时的三个步骤: (1)gsl_ ...
-
nginx配置 首页不显示 index.html首页是显示域名
原状况如下: 访问:www.test.com 敲回车后浏览器中自动跳转致: www.test.com/index.html 公司新需求如下: 访问:www.test.com 敲回车后浏览器中url不变 ...
-
网络子系统55_ip协议分片重组_加入ipq
//ip分片加入到正确的ipq结构 //调用路径:ip_defrag->ip_frag_queue // 处理过程: // 1.正在被释放的ipq,不处理新加入的分片(ipq正在被释放由last ...
-
虚拟机中ubuntu不能联网问题的解决——NAT方式
困惑我多时的Ubuntu联网问题终于解决啦,开心!!!现记录如下,方便日后取用. 可先直接尝试第3步,若不行,则走完全程. 1.查看/设置下NAT的网络 打开VMware Workstation, 点 ...
-
MyBatis - 1.入门
MyBatis 是支持定制化 SQL.存储过程以及高级映射的优秀的持久层框架. MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集. MyBatis可以使用简单的XML或注解 ...
-
转载 多线程实际运用<;第七篇>;
多线程实际运用<第七篇> 1.单线程采集100个页面 class Program { static int i = 6991275; static void Main(string[] a ...
-
获取dictionary 值连续相同的索引，
; i < ;) { , i]; var rangType = companyScheme[i]; string txtCell = ""; switch (rangType ...
-
栅栏加解密python实现（支持密钥加密）
栅栏加解密是对较短字符串的一种处理方式.给定行数Row,依据字符串长度计算出列数Column,构成一个方阵. 加密过程:就是按列依次从上到下对明文进行排列,然后依照密钥对各行进行打乱.最后以行顺序从左 ...
-
apply的调用 http://bbs.51js.com/thread-82017-1-3.html
applay 这个是函数Function的方法为什么Array 也能调用这个函数?比如 function a (){ var kk = []; kk = ...