JS冒泡事件与处理
JavaSciprt事件中有两个很重要的特性：事件冒泡以及目标元素。
事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这 一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。
目标元素: 任何一个事件的目标元素都是最开始的那个元素，在我们的这个例子中也就是按钮，并且它在我们的元素对象中以属性的形 式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待一个事件从它的子级元素里冒泡上来，并且可以很方便地得知这个事件是从哪个元素开始 的。
事件的冒泡和捕获
捕获是从上级元素到下级元素，冒泡是从下级元素到上级元素.
在IE中，每个元素和window对象都有两个方法：attachEvent()和detachEvent()。attachEvent()用来给 一个事件附加事件处理函数。而detachEvent()用来将事件处理函数分离出来。用法：
var fnClick = function() {
alert(“Clicked!”);
}
var oDiv = document.getElementById(“div1”);
oDiv.attachEvent(“onclick”, fnClick);
oDiv.detachEvent(“onclick”, fnClick);
冒泡事件演示和处理方法：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta charset="UTF-8">
<title>
JavaScript事件冒泡处理
</title>
<meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation"
/>
<script type="text/javascript">
function doSomething(obj, evt) {
alert(obj.id);
var e = (evt) ? evt: window.event;
//判断浏览器的类型，在基于ie内核的浏览器中的使用cancelBubble
if (window.event) {
e.cancelBubble = true;
} else {
//e.preventDefault();
//在基于firefox内核的浏览器中支持做法stopPropagation
e.stopPropagation();
}
}
</script>
</head> <body>
<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">
<p>
This is parent1 div.
</p>
<div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
<p>
This is child1.
</p>
</div>
<p>
This is parent1 div.
</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
<p>
This is parent2 div.
</p>
<div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
<p>
This is child2.
</p>
</div>
<p>
This is parent2 div.
</p>
</div>
</body> </html>
把代码直接复制后，打开当点击child1时不仅会弹出 child1， 对话框还会弹出 parent1，这就是冒泡事件的；
但是单击chile2只会弹出child2却不会弹出 parent2，这便是应用了阻止冒泡事件的特效的效果。
事件冒泡的优点和缺点:
1.那些需要创建的以及驻留在内存中的事件处理器少了。
这是很重要的一点，这样我们就提高了性能，并降低了崩溃的风险。
2.在DOM更新后无须重新绑定事件处理器了。
如果你的页面是动态生成的，比如说通过Ajax，你不再需要在元素被载入或 者卸载的时候来添加或者删除事件处理器了。
潜在的问题也许并不那么明显，但是一旦你注意到这些问题，你就可 以轻松地避免它们：你的事件管理代码有成为性能瓶颈的风险，所以尽 量使它能够短小精悍。
不是所有的事件都能冒泡
blur、focus、load和unload不能像其它事件一样冒泡。事 实上blur和focus可以用事件捕获而非事件冒泡的方法获得（在IE之外的其它浏览器中）。
需要注意的是:
如果你的代码处理mousemove事件的话你遇上性能瓶颈的风险可就大了，因为mousemove事件触发非常频繁。而mouseout则因为其 怪异的表现而变得很难用事件代理来管理。
附：
事件的冒泡有什么好处呢？
想 象一下现在我们有一个10列、100行的HTML表格，你希望在用户点击 表格中的某一单元格的时候做点什么。比如说我有一次就需要让表格中的每一个单元格在被点击的时候变成可编辑状态。如果把事件处理器加到这1000个单元格 会产生一个很大的性能问题，并且有可能导致内存泄露甚至是浏览器的崩溃。相反地，使用事件代理的话，你只需要把一个事件
function getEventTarget(e) {
e = e || window.event;
return e.target || e.srcElement;
}
e这个变量表示的是一个事件对象，我们只需要写一点点跨浏览器的代码来返回 目标元素，在IE里目标元素放在srcElemtn属性或event.toElement属性中，而在其它浏览器里则是target或event.relatedTarget属性。
接下来就是editCell函数了，这个函数调用到了 getEventTarget函数。一旦我们得到了目标元素之后，剩下的事情就是看看它是否是我们所需要的那个元素了。
function editCell(e) {
var target = getEventTarget(e);
if(target.tagName.toLowerCase() === 'td') {
// DO SOMETHING WITH THE CELL
}
}
在editCell函数中，我们通过检查目标元素标签名称的方法来确定它是 否是一个表格的单元格。这种检查也许过于简单了点；如果它是这个目标元素单元格里的另一个元素呢？我们需要为代码做一点小小的修改以便于其找出父级的td 元素。如果说有些单元格不需要被编辑怎么办呢？此种情况下我们可以为那些不可编辑的单元格添加一个指定的样式名称，然后在把单元格变成可编辑状态之前先检 查它是否不包含那个样式名称。选择总是多样化的，你只需找到适合你应用程序的那一种。
原文来自http://lengend.iteye.com/blog/1013372 略有改动
处理器添加到table元素上就可 以了，这个函数可以把点击事件给截下来，并且判断出是哪个单元格被点击了。
代 码很简单，我们所要关心的只是如何检测目标元素而已。比方说我们有一个 table元素，ID是“report”，我们为这个表格添加一个事件处理器以调用editCell函数。editCell函数需要判断出传到table 来的事件的目标元素。考虑到我们要写的几个函数中都有可能用到这一功能，所以我们把它单独放到一个名为getEventTarget的函数中：
JS冒泡事件与处理的更多相关文章
- Js 冒泡事件阻止
Js 冒泡事件阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...
- Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理
Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理 1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...
- JS冒泡事件 与 事件捕获
JS冒泡事件 与 事件捕获 案例 <!DOCTYPE html> <html> <head> <title>冒泡事件</title> < ...
- Js冒泡事件和捕获事件
js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...
- Js冒泡事件详解及阻止
Js冒泡机制是指如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的click函数. 如下例所示: <html> & ...
- 浅谈js冒泡事件2
js冒泡阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 . ...
- js冒泡事件的特例toggle无法实现阻止冒泡——slideDown()和slideUp()
一.问题 题目及答案展示:要求,点击题目,展开答案.如下: 展开前 展开后 最开始使用的toggle方法来实现 $(".content_problem").toggle( func ...
- js冒泡事件小解
何为冒泡事件?简单来说事件就像一个水里的泡泡,先触发当前对象再触发其父元素,然后是父元素的父元素... eg: <div class="out" onclick= " ...
- js 冒泡事件 点击任意地方隐藏元素
$(function () { $("#but").click(function (e) {// $();//显示速度 /*阻止冒泡事件*/ e = window.event || ...
随机推荐
- 【宽搜】ECNA 2015 D Rings (Codeforces GYM 100825)
题目链接: http://codeforces.com/gym/100825 题目大意: 给你一张N*N(N<=100)的图表示一个树桩,'T'为年轮,'.'为空,求每个'T'属于哪一圈年轮,空 ...
- poj1743 Musical Theme（后缀数组|后缀自动机）
[题目链接] http://poj.org/problem?id=1743 [题意] 求不可重叠最长重复子串. 2015-11-27 [思路] 1) 据题意处理字符串 ...
- 常考的算法及Java知识总结
算法 1 字符串模式匹配问题 2 排列组合问题 3 查找排序问题 数据结构 B树(B,B*,B+,红黑树)和二叉树的区别,MAP,hashmap, JAVA: 线程sleep,wait,wake(), ...
- Trident-MySQL
使用事物TridentTopology 持久化数据到MySQL 1.构建拓扑JDBCTopology类 package storm.trident.mysql; import java.util.Ar ...
- Theme Section - HDU 4763（KMP）
题目大意:给你一个串,从这个串里面找出一个前缀后缀中间相等的串的最大长度也就是 EAEBE,每个字母都代表一个串,E出现了三次,找出最长的那个E. 分析:我们知道KMP里面保存的就是前缀和后缀的最 ...
- javaweb笔记4之httpservlet
1 httpservlet简介 service方法是Servlet的入口方法,调用servlet会首先调用service方法.在service方法中,会根据请求方式分别调用不同的doXXX方法.例如, ...
- PostgreSQL和GreenPlum数据库的区别
PostgreSQL PostgreSQL是以加州大学伯克利分校计算机系开发的 POSTGRES,现在已经更名为POSTGRES,版本 4.2为基础的对象关系型数据库管理系统(ORDBMS).Po ...
- Java 二分查找
public int binarySearch(int[] nums, int target) { int low = 0; int high = nums.length; while (low &l ...
- 30余套系统模版|DIV+CSS网页模板|简洁大气系统模板
30余套系统模版|DIV+CSS网页模板|简洁大气系统模板.都是一些后台系统的模版,很适合开发一些管理系统,办公系统,网站后台系统等.使用很广泛,很实用的系统模版. 下载地址: 点击下载
- iOS工具种之16进制颜色转为UIColor
#define DEFAULT_VOID_COLOR [UIColor whiteColor] + (UIColor *)colorWithHexString:(NSString *)stringT ...