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 对象,当事件 ...
随机推荐
- c++11:function的用法
function是函数.函数对象.函数指针.和成员函数的包装器,可以容纳任何类型的函数对象,函数指针,引用函数,成员函数的指针 普通函数 #include <functional> voi ...
- HTML5应用开发：JavaScript库iScroll教程
目录 1. iScroll介绍 2. 安装和使用 3. 简单的iScroll例子 4. Pinch & Zoom 5. Snap to element 6. iScroll 详细参数 1. i ...
- Oracle中排序列中值相同引发的问题（译）
This queston came up on the Oracle newsgroup a few days ago: 这个问题在Oracle的新闻中心被提出了一段时间: I have a tabl ...
- Gulpfile.js——编译、压缩、合并js和css文件
gulp 一个入门教程:http://www.ydcss.com/gulp API文档地址:http://www.gulpjs.com.cn/docs/api/ 我的一个Low版的gulpfile v ...
- AngularJS(16)-路由
AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web ...
- RHEL7 Ansible
[root@promote tt]# rpm -iUvh http://dl.Fedoraproject.org/pub/epel/7/x86_64/e/epel-release-7-8.noarch ...
- C#中Delegate
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 通过数据绑定模板得到对应的Item控件
这类控件都继承于Selector,其中主要有ComboBox.listview.listbox.datagrid. 由于个人对WPF的了解所有可能有遗漏,希望各位能够指出一起进步. 在遍历上面控件时主 ...
- hive中简单介绍分区表
所介绍内容基本上是翻译官方文档,比较肤浅,如有错误,请指正! hive中创建分区表没有什么复杂的分区类型(范围分区.列表分区.hash分区.混合分区等).分区列也不是表中的一个实际的字段,而是一个或者 ...
- IIS WMI Provider
section contains information about the classes that are implemented by the IIS WMI provider in the M ...