事件冒泡和事件捕获

事件冒泡和事件捕获

参考1：http://www.2cto.com/kf/201202/121039.html

参考2：http://blog.csdn.net/iefreer/article/details/8573940

前言：这两个参考，一个 傻瓜式复制黏贴，运行一看，一目了然。一个 讲解清晰，直观，通俗易懂。故转摘，以为笔记。

1，事件冒泡（复制黏贴代码，自己运行试试）

2，事件捕获（复制黏贴，自己试

运行了两个例子后，现在就讲一些书面的概念（摘自网络，）

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

事件捕获：事件首先会交给最外层的元素，接着再交给更具体的元素

最终出台的DOM

标准规定应该同时使用这两种策略：首先，事件要从一般元素到具体元素逐层捕获，然后，事件
再通过冒泡返回DOM树的顶层。而事件处理程序可以注册到这个过程中的任何一个阶段。

我的理解：

关于一些概念的通俗理解：

事件：咱就理解成 【”我点击了“】

事件处理程序：咱就理解成 【程序里，加在元素上的click，onclick之类的】

事件对象： 咱就理解成 【常见的变量event,e之类的】

事件目标：咱就理解成 【IE的event.srcElement和FF的event.target，　　保存着发生事件的目标元素（实际被单击的元素）在jquery里，有一段代码if (event.target == this) {}，event.target就是实际被点击的元素，this是处理事件的元素(绑定了click,onclick等事件处理程序代码的元素)】

事件冒泡：咱就理解成 【单击了最里面一层的的元素（事件目标），最里面的元素就会向外一层层传播，告诉外层元素，并且这些外层元素都获得了“我点击了”(事件)的信号，如果外层元素，本身绑定了click，onclick之类的（事件处理程序），因为得到了“我点击了”(事件)的信号，就会执行click，onclick的代码】，最后的看到的效果，参考事件冒泡的例子，就是：我单击了最里面的元素，却执行中层，外层的alert，可是我明明没有单击他们啊！ 这就是 事件(我点击了)，冒泡的方式，向外传播了。外层也得到了单击事件。

事件捕获：想看效果，就要先看看事件捕获例子里的这段代码：“$('m').addEventListener('click', altmiddle, true);”，addEventListener的最后一个参数为true，则代表事件在捕获阶段被处理，false则代表事件在冒泡阶段被处理。 咱的理解就是，有了这句话，不妨把上面事件捕获的代码，加上 $('m').addEventListener('click', altmiddle, false); $('i').addEventListener('click', altin, false);或把事件捕获例子里的最后代码注释掉亦可 试试。于是最后的效果是：按照先捕获，再冒泡的流程，： 捕获过程:alert('middle') ->alert('in')->冒泡过程: alert('in')->alert('middle') ->alert('out')

转自:http://www.cnblogs.com/wenzichiqingwa/p/3910236.html