事件冒泡和事件捕获
参考1：http://www.2cto.com/kf/201202/121039.html
参考2：http://blog.csdn.net/iefreer/article/details/8573940
前言：这两个参考，一个 傻瓜式复制黏贴，运行一看，一目了然。一个 讲解清晰，直观，通俗易懂。故转摘，以为笔记。
1，事件冒泡（复制黏贴代码，自己运行试试）
<!DOCTYPE html> <!-- Copyright Wenzhou 121 brand management co., LTD --> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> </head> <body> <script type="text/javascript"> document.write("<div id='o' style='width: 400px; height: 400px;border: 1px solid #CCCCCC'><div id='m' style='width: 200px; height: 200px;border: 1px solid #CCCCCC;'><div id='i' style='width: 100px;height: 100px;border: 1px solid #CCCCCC;'></div></div></div>"); function $(id) { return document.getElementById(id); } function altin() { alert("in"); } function altmiddle() { alert("middle"); } function altout() { alert("out") }
//也可以使用形如addEventListener('click',altout,false);的方式 $('o').onclick = altout; $('m').onclick = altmiddle; $('i').onclick = altin; </script> </body> </html>
2，事件捕获（复制黏贴，自己试<!DOCTYPE html>
<!-- Copyright Wenzhou 121 brand management co., LTD --> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> </head> <body> <script type="text/javascript"> document.write("<div id='o' style='width: 400px; height: 400px;border: 1px solid #CCCCCC'><div id='m' style='width: 200px; height: 200px;border: 1px solid #CCCCCC;'><div id='i' style='width: 100px;height: 100px;border: 1px solid #CCCCCC;'></div></div></div>"); function $(id) { return document.getElementById(id); } function altin() { alert("in"); } function altmiddle() { alert("middle"); } function altout() { alert("out") } //这里使用addEventListener，而不是使用onclick这样形式。是因为前者的第三个参数可以控制事件在捕获阶段还是冒泡阶段处理。
//经过测试，使用onclick等同于addEventListener //第三个等于false。所以上面实践冒泡的例子才使用onclick的形式
$('o').addEventListener('click',altout.true);
$('m').addEventListener('click', altmiddle, true); $('i').addEventListener('click', altin, true);
//可是试试加上如下代码
// $('m').onclick=altmiddle;
// $('i').onclick=altin; </script> </body> </html>
运行了两个例子后，现在就讲一些书面的概念（摘自网络，）
事件冒泡：当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这 一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到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')
】
