JavaScript事件捕获与事件冒泡原理

原文地址：http://blog.sina.com.cn/s/blog_6c07dac30100lkw8.html 
 
 
支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。

看下图：


事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
通过一个例子可以很好的理解这种原理html:<ul id="news">  <li>    <h3><a href="news.php?item=1">Title 1</a></h3>    <p>Description 1</p>    <p class="more"><a href="news.php?item=1">link 1</a></p>  </li></ul>JavaScript:<script type="text/javascript">bubbleTest={    init:function(){        if(!document.getElementByIdx_x_x || !document.create_r_rTextNode){return;}        bubbleTest.n=document.getElementByIdx_x_x('news');        if(!bubbleTest.n){return;}        bubbleTest.addMyListeners('click',bubbleTest.liTest,'li');        bubbleTest.addMyListeners('click',bubbleTest.aTest,'a');        bubbleTest.addMyListeners('click',bubbleTest.pTest,'p');    },    addMyListeners:function(eventName,functionName,elements){        var temp=bubbleTest.n.getElementsByTagName_r(elements);        for(var i=0;i<temp.length;i++){            temp[i].addEventListener(eventName,functionName,true);        }    },    liTest:function(e){        alert('li was clicked');    },    pTest:function(e){        alert('p was clicked');    },    aTest:function (e){        alert('a was clicked');    }}window.addEventListener('load',bubbleTest.init,false);</script> 如果给useCapture设置为true，点击link 1时会依次弹出：temp[i].addEventListener(eventName,functionName,true);第1次： li was clicked第2次:  p was clicked第3次:  a was clicked
如果给useCapture设置为false，点击link 1时会依次弹出：temp[i].addEventListener(eventName,functionName,false);第1次： a was clicked第2次:  p was clicked第3次:  li was clicked
结果正好相反，由此例可以看出事件捕获与事件冒泡实际效果。