JavaScript事件触发顺序（DOM0 和DOM2）

doctype html >

< html >

< head >

< title >事件捕获顺序测试 title >

< meta charset= "utf-8" >

< style text= "txt/css" >

div{

border: 1px solid red;

padding: 20px;

}

< / style >

head >

< body >

< div onclick= "alert(1)" >

onclick 输出1

< div onclick= "alert(2)" >

onclick 输出2

< div onclick= "alert(3)" >

onclick 输出3

(DOM0级事件)

div >

div >

div >

< hr >

< div id= "1" >

click 输出1

< div id= "2" >

click 输出2

< div id= "3" >

click 输出3

（DOM2级事件处理）

div >

div >

div >

< script >

var div1= document. getElementById( "1");

var div2= document. getElementById( "2");

var div3= document. getElementById( "3");

div1. addEventListener( "click", function(){

alert( "1");

}, true);

div1. addEventListener( "click", function(){

alert( "4");

});

div2. addEventListener( "click", function(){

alert( "2");

});

div3. addEventListener( "click", function(){

alert( "3");

}, true);

< / script >

body >

html >

运行结果：

在DOM0事件测试中：单击div1  输出为1

                                   单击div2  输出为 2 1

                                   单击div3  输出3 2 1

可以看见在DOM0级事件中，事件是在冒泡阶段触发，由被点击元素开始向上冒泡

在DOM2事件测试中：div1和div3的事件在使用addEventListener中添加了true参数，指明该事件是在捕获阶段触发

                                    div2的事件在冒泡阶段触发

                                同时在div2上还添加了冒泡阶段的触发事件

运行结果:

                   单击div1 输出1 4

                   单击div2 输出 1 2 4

                   单击div3 输出1 3 2 4

可见冒泡触发不仅是指自己的冒泡（捕获）触发，还是包含元素的冒泡（捕获）触发

同时捕获和冒泡阶段可以分别触发不同的事件处理函数