DOM事件捕获与冒泡和事件监听

 <script type="text/javascript">
        var div=document.getElementById("myDiv");    
        div.addEventListener("click",function(event){
            alert("div");
        },true);
        document.body.addEventListener("click",function(event){
            alert("body");
        },true);  
    </script>

DOM事件流
"DOM2级事件”规定的事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段。以上面的HTML页面为例，单击<div>元素将按照下图触发事件：

（1）捕获阶段（Capture Phase）

事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径，在冒泡阶段，事件会通过这个路径回溯到文档跟节点。

（2）目标阶段（Target Phase）

当事件到达目标节点的，事件就进入了目标阶段。事件在目标节点上被触发，然后会逆向回流，直到传播至最外层的文档节点。

（3）冒泡阶段（Bubble Phase）

事件在目标元素上触发后，并不在这个元素上终止。它会随着DOM树一层层向上冒泡，回溯到根节点。
冒泡过程非常有用。它将我们从对特定元素的事件监听中释放出来，如果没有事件冒泡，我们需要监听很多不同的元素来确保捕获到想要的事件。

事件阻止
调用 event.stopPropagation()。阻止冒泡
调用 event.preventDefault()。阻止捕获

事件监听
JavaScript中事件监听的方法总共有三种，分别如下：

element.addEventListener(type, listener,[useCapture]); //IE6~8不支持
element.attachEvent('on' + type, listener)     //支持IE6~10，IE11不支持
element['on' + type] = function(){}     //支持所有浏览器

参数解释：
type：事件类型
listener：事件出发后的回调函数
useCapture：是否使用捕获，如果值为true，useCapture表示用户希望发起捕获。在发起捕获之后，只要DOM子树下发生了该事件类型，都会先被该事件监听器捕获，然后再被派发到DOM子树中的事件监听器中。并且向上冒泡的事件不会触发那些发起捕获的事件监听器。useCapture默认值是true。