javascript--DOM事件流

说明：DOM结构是一个树状结构(文档对象模型)，事件发生时在元素节点之间按照特定的顺序传播，即DOM事件流。

DOM同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触发DOM中的所有对象，从document对象开始，也在document对象结束。

DOM事件流模型

在DOM兼容浏览器中，事件流分为3个阶段：

（1）捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；

（2）目标阶段：真正的目标节点正在处理事件的阶段；

（3）冒泡阶段：事件从目标节点自下而上向Document节点传播的阶段。

当事件在某一DOM元素被触发时事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。

冒泡阶段：如果addEventListener第三个参数是false则处于捕获阶段执行顺序 div2->div1->body->html->dom

 var div2=document.querySelector(".div2");
    div2.addEventListener('click',function () {
        alert("div2");
    },false);
    var div1=document.querySelector(".div1");
    div1.addEventListener('click',function () {
        alert("div1");
    },false);

捕获阶段：如果addEventListener第三个参数是true则处于捕获阶段执行顺序 dom->html->body->div1->div2

 var div2=document.querySelector(".div2");
    div2.addEventListener('click',function () {
        alert("div2");
    },true);
    var div1=document.querySelector(".div1");
    div1.addEventListener('click',function () {
        alert("div1");
    },true);