JavaSciprt事件中有两个很重要的特性：事件冒泡以及目标元素。

事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这 一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

目标元素: 任何一个事件的目标元素都是最开始的那个元素，在我们的这个例子中也就是按钮，并且它在我们的元素对象中以属性的形 式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待一个事件从它的子级元素里冒泡上来，并且可以很方便地得知这个事件是从哪个元素开始 的。

事件的冒泡和捕获

捕获是从上级元素到下级元素，冒泡是从下级元素到上级元素.

在IE中，每个元素和window对象都有两个方法：attachEvent()和detachEvent()。attachEvent()用来给 一个事件附加事件处理函数。而detachEvent()用来将事件处理函数分离出来。例如：

JS代码

var fnClick = function() {

alert(“Clicked!”);

}

var oDiv = document.getElementById(“div1”);

oDiv.attachEvent(“onclick”, fnClick);

oDiv.detachEvent(“onclick”, fnClick);
事件的冒泡有什么好处呢？

想象一下现在我们有一个10列、100行的HTML表格，你希望在用户点击 表格中的某一单元格的时候做点什么。比如说我有一次就需要让表格中的每一个单元格在被点击的时候变成可编辑状态。如果把事件处理器加到这1000个单元格 会产生一个很大的性能问题，并且有可能导致内存泄露甚至是浏览器的崩溃。相反地，使用事件代理的话，你只需要把一个事件处理器添加到table元素上就可 以了，这个函数可以把点击事件给截下来，并且判断出是哪个单元格被点击了。

代码很简单，我们所要关心的只是如何检测目标元素而已。比方说我们有一个 table元素，ID是“report”，我们为这个表格添加一个事件处理器以调用editCell函数。editCell函数需要判断出传到table 来的事件的目标元素。考虑到我们要写的几个函数中都有可能用到这一功能，所以我们把它单独放到一个名为getEventTarget的函数中：

JS代码

function getEventTarget(e) {

e = e || window.event;

return e.target || e.srcElement;

}

e这个变量表示的是一个事件对象，我们只需要写一点点跨浏览器的代码来返回 目标元素，在IE里目标元素放在srcElemtn属性或event.toElement属性中，而在其它浏览器里则是target或event.relatedTarget属性。

接下来就是editCell函数了，这个函数调用到了 getEventTarget函数。一旦我们得到了目标元素之后，剩下的事情就是看看它是否是我们所需要的那个元素了。

JS代码

function editCell(e) {

var target = getEventTarget(e);

if(target.tagName.toLowerCase() === ‘td’) {

// DO SOMETHING WITH THE CELL

}

}

在editCell函数中，我们通过检查目标元素标签名称的方法来确定它是 否是一个表格的单元格。这种检查也许过于简单了点；如果它是这个目标元素单元格里的另一个元素呢？我们需要为代码做一点小小的修改以便于其找出父级的td 元素。如果说有些单元格不需要被编辑怎么办呢？此种情况下我们可以为那些不可编辑的单元格添加一个指定的样式名称，然后在把单元格变成可编辑状态之前先检 查它是否不包含那个样式名称。选择总是多样化的，你只需找到适合你应用程序的那一种。

事件冒泡的优点和缺点:

1.那些需要创建的以及驻留在内存中的事件处理器少了。

这是很重要的一点，这样我们就提高了性能，并降低了崩溃的风险。
2.在DOM更新后无须重新绑定事件处理器了。

如果你的页面是动态生成的，比如说通过Ajax，你不再需要在元素被载入或 者卸载的时候来添加或者删除事件处理器了。
潜在的问题也许并不那么明显，但是一旦你注意到这些问题，你就可 以轻松地避免它们：你的事件管理代码有成为性能瓶颈的风险，所以尽 量使它能够短小精悍。

不是所有的事件都能冒泡

blur、focus、load和unload不能像其它事件一样冒泡。事 实上blur和focus可以用事件捕获而非事件冒泡的方法获得（在IE之外的其它浏览器中）。
需要注意的是:

如果你的代码处理mousemove事件的话你遇上性能瓶颈的风险可就大了，因为mousemove事件触发非常频繁。而mouseout则因为其 怪异的表现而变得很难用事件代理来管理。

消除冒泡事件的方法：

阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）
下面的一段代码即可以很好的解释是么是冒泡效果，什么叫消除冒泡效果

HTML代码

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title> 阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）</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. Will bubble.</p>

</div>

<p>This is parent2 div.</p>

</div>

</body>

</html>

但是单击chile2只会弹出child2却不会弹出 parent2，这便是应用了阻止冒泡事件的特效的效果。

JS事件冒泡的更多相关文章

  1. 什么是JS事件冒泡？

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...

  2. js事件冒泡和事件委托

    js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...

  3. 什么是JS事件冒泡

    什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...

  4. 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  5. js事件冒泡和捕捉

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...

  6. 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

    哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...

  7. 理解js事件冒泡事件委托事件捕获

    js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...

  8. js 事件冒泡、事件捕获、stopPropagation、preventDefault

    转自:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: ...

  9. JS事件冒泡及阻止

    事件冒泡及阻止 当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级,一直到window,当然其传播的是事件,绑定的执行函数并不会传播,如果父级没有绑定事件函数,就算传递了事件,也不会有什么表 ...

  10. 关于JS 事件冒泡和onclick,click,on()事件触发顺序

    今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...

随机推荐

  1. Type Project has no default.properties file! Edit the project properties to set one.

    Description Resource Path Location Type Project has no default.properties file! Edit the project pro ...

  2. LAMP平台搭建菜鸟入门级实验

    LAMP平台搭建(菜鸟入门级) mysql 安装: (1)二进制安装  二进制安装 ,执行解压配置即可.无须执行三布安装. (2)源码编译安装 安装准备工作: (1)查看系统配置:#uname -a/ ...

  3. C# Ping的例子，可用于测试网络，延迟xx毫秒 C#编写网站测速

    C#编写网站测速 WebClient wcl = new WebClient(); Stopwatch spwatch = new Stopwatch(); spwatch.Start(); byte ...

  4. mac android studio 编译时报Class JavaLaunchHelper is implemented in both

    Class JavaLaunchHelper is implemented in both /Library/Java/JavaVirtualMachines/jdk1.8.0_25.jdk/Cont ...

  5. 千里积于跬步——流，向量场，和微分方程[转载]

    在很多不同的科学领域里面,对于运动或者变化的描述和建模,都具有非常根本性的地位--我个人认为,在计算机视觉里面,这也是非常重要的. 什么是"流"? 在我接触过的各种数学体系中,对于 ...

  6. MapReduce Shuffle原理 与 Spark Shuffle原理

    MapReduce的Shuffle过程介绍 Shuffle的本义是洗牌.混洗,把一组有一定规则的数据尽量转换成一组无规则的数据,越随机越好.MapReduce中的Shuffle更像是洗牌的逆过程,把一 ...

  7. metaspace之三--Metaspace解密

    概述 metaspace,顾名思义,元数据空间,专门用来存元数据的,它是jdk8里特有的数据结构用来替代perm,这块空间很有自己的特点,前段时间公司这块的问题太多了,主要是因为升级了中间件所致,看到 ...

  8. JVM内存结构之二--新生代及新生代里的两个Survivor区(下一轮S0与S1交换角色，如此循环往复)、常见调优参数

    一.为什么会有年轻代 我们先来屡屡,为什么需要把堆分代?不分代不能完成他所做的事情么?其实不分代完全可以,分代的唯一理由就是优化GC性能.你先想想,如果没有分代,那我们所有的对象都在一块,GC的时候我 ...

  9. 在Spring的bean中注入HttpServletRequest解密

    我们可以在Spring的bean中轻松的注入HttpServletRequest,使用@Autowired HttpServletRequest request;就可以了. 但是,为什么我们可以直接这 ...

  10. css中table样式

    border-spacing:设置相邻单元格的边框间的距离; border-collapse:设置表格的边框是否被合并为一个单一的边框:{separate/collapse/inherit(IE不支持 ...