JavaScript中的事件传播(DOM2标准事件模型)

    在所有的现代浏览器当中——除了IE9之前的版本——都实现了DOM2标准事件模型，这个事件模型规定:每一个DOM元素所触发的事件都要经历三个阶段：一、捕获阶段；二、目标对象本身的事件处理程序调用阶段；三、冒泡阶段。

    冒泡阶段：当文档元素上发生某个类型的事件时，他们会在文档树上向上传播。（即调用父元素的相同类型的事件处理函数）

    捕获阶段：捕获阶段像反向的冒泡阶段。最先调用Window对象的捕获处理程序，然后是Document对象的捕获处理程序，接着是body对象的，再然后是DOM树向下，以此类推，直到调用事件目标元素的父元素的捕获事件处理程序。在目标元素对象本身上注册的捕获事件处理程序不会被调用。

    在DOM2标准事件模型中，为一个DOM元素绑定事件的方法为addEventListener(),这个方法要求传递三个参数，第一个参数为一个字符串，表示事件的类型，如"click"；第二个参数是一个函数，表示事件处理程序，浏览器会默认为该函数传递一个事件对象(Event)；第三个参数是一个布尔值，布尔值为false表示此函数将注册为冒泡事件处理程序（通常设置为false即可），如果值为true，表示此函数将注册为捕获事件处理程序。值得注意的是，能通过多次调用addEventListener()为同一个对象注册同一事件类型的多个处理程序函数。当对象上发生事件时，所有该事件类型的注册处理程序都会按照注册的顺序调用。

    分析事件的触发过程，分两种情况：

    1.当目标元素不存在父元素或目标元素的父元素并没有注册与触发目标元素相同类型的事件时，事件模型的第一和第三阶段是没有实际意义的（即不会发生任何的事情）。

    2.当目标元素存在父元素且目标元素的父元素注册了与触发目标元素相同类型的事件时，事件模型的第一和第三阶段就开始起作用了：

      为了方便，先将以下示例中页面效果截图如下，所有示例的页面效果都是如此：

                            html中页面效果

        html:

<div id="eventSpreadDiv" style="padding:20px;background-color:red;width:300px;">
<button id="eventSpreadBtn" type="button">eventSpreadBtn</button>&nbsp;&nbsp;&nbsp;eventSpreadDiv
</div>

    (1) 父元素注册捕获事件，子元素不注册事件：

       js:

document.getElementById("eventSpreadDiv").addEventListener("click", function(e) {console.log(e.currentTarget.id);}, true);

       控制台输出:

       点击div(红色区域):  

eventSpreadDiv

       点击button:

eventSpreadDiv

       分析：当点击div时，出现的是事件触发过程的情况1：目标元素不存在父元素，所以只执行了注册在eventSpreadDiv上的click方法，此时e.currentTarget就是eventSpreadDiv；当点击button时，出现的是事件触发过程的情况2：目标元素(此时是button)的父元素(div)注册了与触发目标元素相同类型的事件(click事件)，又因为div上注册的click事件的类型为捕获事件，所以当事件模型进行第一阶段时，先执行了div的click事件，此时e.currentTarget就是eventSpreadDiv；然后执行第二阶段，即目标元素button的click事件(并无注册事件)；接下来是第三阶段冒泡阶段（也没有相应的函数调用）。

    (2)父元素注册冒泡事件，子元素不注册事件

       js:

document.getElementById("eventSpreadDiv").addEventListener("click", function(e) {console.log(e.currentTarget.id);}, false);

       控制台输出:

       点击div(红色区域):

eventSpreadDiv

       点击button:

eventSpreadDiv

       分析：当点击div时，出现的是事件触发过程的情况1：目标元素不存在父元素，所以只执行了注册在eventSpreadDiv上的click方法，此时e.currentTarget就是eventSpreadDiv；当点击button时，出现的是事件触发过程的情况2：目标元素(此时是button)的父元素(div)注册了与触发目标元素相同类型的事件(click事件)，又因为div上注册的click事件的类型为冒泡事件，所以事件模型进行第一阶段时没有相应的函数调用；然后执行第二阶段，即目标元素button的click事件(并无注册事件)；接下来是第三阶段冒泡阶段，此时执行了div的click事件，e.currentTarget就是eventSpreadDiv。

    (3)父元素注册捕获事件和冒泡事件，子元素注册click事件

       js:

document.getElementById("eventSpreadBtn").addEventListener("click", function(e){console.log(e.currentTarget.id)}, false);
document.getElementById("eventSpreadDiv").addEventListener("click", function(e) {console.log("冒泡" + e.currentTarget.id);}, false);
document.getElementById("eventSpreadDiv").addEventListener("click", function(e) {console.log("捕获" + e.currentTarget.id);}, true);

       控制台输出:

       点击div(红色区域):

冒泡eventSpreadDiv
捕获eventSpreadDiv

       点击button:

捕获eventSpreadDiv
eventSpreadBtn
冒泡eventSpreadDiv

       分析:当点击div时，出现的是事件触发过程的情况1：目标元素不存在父元素，所以只执行了注册在eventSpreadDiv上的click方法，但是，此时div被注册了两个click方法，所以，click事件其实被触发了两次，调用顺序为代码的注册顺序(即先调用第一个被注册的冒泡事件再调用第二个被注册的捕获事件)，这两个事件执行时的e.currentTarget都是div；当点击button时，出现的是事件触发过程的情况2：目标元素(此时是button)的父元素(div)注册了与触发目标元素相同类型的事件(click事件)，又因为div上既注册了事件类型为click的捕获事件，又注册了事件类型为click的冒泡事件，所以当事件模型进行第一阶段时，执行了div的click捕获事件，此时e.currentTarget就是eventSpreadDiv；然后执行第二阶段，即目标元素button的click事件，此时e.currentTarget就是button；接下来是第三阶段冒泡阶段，执行了div的click冒泡事件，此时e.currentTarget就是eventSpreadDiv。

       总结：DOM2标准事件模型，为我们编写JavaScript事件驱动型的程序提供了更灵活的方案，比如我们可以在捕获阶段和冒泡阶段来阻止事件的继续传播（详情请看上一篇），也可利用这一模型进行代码的调试。

本文出自 “希望家园” 博客，转载请与作者联系！