JavaScript——事件流（事件冒泡和事件捕获）

1、事件流

当浏览器发展到第4代时，浏览器开发团队遇到了一个问题：页面中的哪个元素会拥有某个特定的事件？当你单击某个按钮时，显然该单击事件并不仅仅发生在按钮上，它还发生在按钮的所有祖先元素上，比如按钮的容器元素，容器元素的父元素，甚至整个页面document。但是，哪个元素最先接收到该事件呢？页面接收事件的顺序又是怎样的呢？由此引出了事件流的概念。事件流描述的就是从页面中接收事件的顺序。

2、两个模型

Netscape和Microsoft给出了两个不同的结论。Netscape说document会首先接收到该事件，提出了事件捕获流。而Microsoft认为事件首先在按钮上发生，提出了事件冒泡流。

3、事件冒泡：其基本思想是事件从事件发生的目标最内部开始触发，向上触发到最外部（document对象）

事件冒泡的作用：（1）事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），还可以让你在对象层的不同级别捕获事件

（2）让不同的对象同事捕获同一事件，并调用自己的专属处理程序做自己的事情

阻止事件冒泡（程序为转）

<div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//阻止事件冒泡后，你点击灰色盒子，整个过程只弹一次对话框了（注意与默认情况对比）
function showMsg(obj,e)
{
    alert(obj.id);
    stopBubble(e)
}
//阻止事件冒泡函数
function stopBubble(e)
{
    if (e && e.stopPropagation)
        e.stopPropagation()
    else
        window.event.cancelBubble=true
}
</script>

4.事件捕获：与冒泡正好相反，事件触发顺序是从最外层的对象（document对象）到最里面的对象

5、DOM事件流：DOM同时支持事件捕获和事件冒泡，但是事件捕获先发生，两个事件流可以遍历DOM中的所有对象，起始和结束都是document对象。

<div class="div1" id="di1">
    <div class="div1" id="di2"></div>
</div>
<script type="text/javascript">
    function $(ID){
        return document.getElementById(ID);
    }
    var Div1 = $("di1");
    var Div2 = $("di2");
//    当第三个值为true的时候是“捕获事件”  如果是false则为“冒泡”
    Div1.addEventListener("click",fun1);
    Div2.addEventListener("click",fun2);
    function fun1(){
        alert("我是父级div，di1");
        return true;//true为事件捕获
    }
    function fun2(){
       alert("我是子级div，di2");
       return true;//true为事件捕获
    }
</script>