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 || ...
随机推荐
- ie中弹出框中元素的定位
用selenium在ie8浏览器中定位一个弹出框时,直接用ie developer tools可能不一定能定位到,有一个解决的办法是直接在url后面加上#noHide,刷新后,然后再用ie devel ...
- Minimum Size Subarray Sum —— LeetCode
Given an array of n positive integers and a positive integer s, find the minimal length of a subarra ...
- HDOJ 2021 发工资咯：）（利用了一种取余的思想）
Problem Description 作为杭电的老师,最盼望的日子就是每月的8号了,因为这一天是发工资的日子,养家糊口就靠它了,呵呵 但是对于学校财务处的工作人员来说,这一天则是很忙碌的一天,财务处 ...
- cf702C Cellular Network
C. Cellular Network time limit per test 3 seconds memory limit per test 256 megabytes input standard ...
- [Locked] Shortest Word Distance I & II & III
Shortest Word Distance Given a list of words and two words word1 and word2, return the shortest dist ...
- Mac下Intellij IDea发布Java Web项目详解三 新建Module
准备工作1:新建第一个JavaWeb项目 Step4 添加两个module 4.1 右键[WebWorkSpace]-[New]-[Module] 4.2 重复 准备工作1:新建第一个JavaWeb项 ...
- Appium移动自动化测试（四）--one demo（转）
Appium移动自动化测试(四)--one demo 2015-06-15 20:41 by 虫师, 40514 阅读, 34 评论, 收藏, 编辑 继续更新. ------------------- ...
- ubuntu忘记密码
Do these two things just to make sure: mount -o remount,rw / This first part remounts the root parti ...
- PHP学习之［第07讲］PHP5.4 文件操作函数 之 图片计数器的实例
1.filetype():输出文件类型: 2.stat():获取文件的基本属性的数组: 3.clearstatcache().is_executable().isDir().idFile().scan ...
- Django admin进阶
1. ModelAdmin.inlines 将有外键的子类包含进视图 ,实例: class Author(models.Model): name = models.CharField(max_leng ...