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冒泡事件与处理的更多相关文章

  1. Js 冒泡事件阻止

    Js 冒泡事件阻止   1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...

  2. Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理

    Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...

  3. JS冒泡事件 与 事件捕获

    JS冒泡事件 与 事件捕获 案例 <!DOCTYPE html> <html> <head> <title>冒泡事件</title> < ...

  4. Js冒泡事件和捕获事件

    js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...

  5. Js冒泡事件详解及阻止

    Js冒泡机制是指如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的click函数. 如下例所示: <html>     & ...

  6. 浅谈js冒泡事件2

    js冒泡阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 . ...

  7. js冒泡事件的特例toggle无法实现阻止冒泡——slideDown()和slideUp()

    一.问题 题目及答案展示:要求,点击题目,展开答案.如下: 展开前 展开后 最开始使用的toggle方法来实现 $(".content_problem").toggle( func ...

  8. js冒泡事件小解

    何为冒泡事件?简单来说事件就像一个水里的泡泡,先触发当前对象再触发其父元素,然后是父元素的父元素... eg: <div class="out" onclick= " ...

  9. js 冒泡事件 点击任意地方隐藏元素

    $(function () { $("#but").click(function (e) {// $();//显示速度 /*阻止冒泡事件*/ e = window.event || ...

随机推荐

  1. 搜索(三分)：HDU 3400 Line belt

    Line belt Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  2. 吐血原创：mini2440和win7笔记本利用无路由功能的交换机共享上网（使用x-router软路由）

    真的是要吐血了,为了使自己的win7系统笔记本和mini2440,通过交换机(没有路由功能,才5口,和HUB差不多)共享宽带上网,并且连接上的宽带还是长城宽带,我用尽各种cmd命令都查不到长城宽带的默 ...

  3. android webview无法加载网页

    主要原因是没有在AndroidManifest.xml里面设置如下: <user-permission android:name="android.permission.INTERNE ...

  4. oGitHub 注册

    GitHub 注册 要想使用 GitHub 第一步当然是注册 GitHub 账号: 1.首先打开 https://github.com/pricing 进行注册. 2.在打开的页面中点击「Sign u ...

  5. Servlet线程安全

    public class servletDemo1 extends HttpServlet { int i=0; public void doGet(HttpServletRequest reques ...

  6. angularJS promise $q

    Promise 一 介绍 1.什么是promise 我们知道JavaScript语言的执行环境是“单线程”,所谓单线程,就是一次只能够执行一个任务,如果有多个任务的话就要排队,前面一个任务完成后才可以 ...

  7. tomcat URL简写案例：模拟站点www.baidu.com的訪问

    tomcat URL简写案例:模拟站点  * 实际URL:http://www.baidu.com:8080/myweb/1.html  * 实际位置:F:\mywebapps\myweb\1.htm ...

  8. spring mvc DispatcherServlet详解之前传---前端控制器架构

    前端控制器是整个MVC框架中最为核心的一块,它主要用来拦截符合要求的外部请求,并把请求分发到不同的控制器去处理,根据控制器处理后的结果,生成相应的响应发送到客户端.前端控制器既可以使用Filter实现 ...

  9. 第一篇：K-近邻分类算法原理分析与代码实现

    前言 本文介绍机器学习分类算法中的K-近邻算法并给出伪代码与Python代码实现. 算法原理 首先获取训练集中与目标对象距离最近的k个对象,然后再获取这k个对象的分类标签,求出其中出现频数最大的标签. ...

  10. codevs 2612 最有分解方案 （贪心）

    /* 数字不重复 将一个正整数分解成若干的整数的和 数字不重复 且数字不相同 保证不重复的话 贪心策略是从2开始分 然后把最后剩下的数均匀分到后面 证明嘛 这里写的可能不是很严谨 对于一个n 如果我们 ...