1.事件冒泡：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
IE 5.5: div -> body -> document
IE 6.0: div -> body -> html -> document
Mozilla 1.0: div -> body -> html -> document -> window
2.事件捕获：事件从最不精确的对象(document 对象)开始触发，然后到最精确target
3.DOM事件流：同时支持事件捕获与事件冒泡，事件捕获发生在事件冒泡之前，DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。
下图是DOM事件流中的事件捕获与事件冒泡过程：
js中事件监听方法总共有三种，分别如下所示：
- element.addEventListener(type, listener[, useCapture]); // IE6~8不支持
- element.attachEvent(’on’ + type, listener); // IE6~10，IE11不支持
- element[’on’ + type] = function(){} // 所有浏览器
支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行。
传统的element[’on’ + type] = function(){}与addEventListener(event,fn,useCapture)区别在于element[’on’ + type] = function(){}无法进行事件捕获，并且element[’on’ + type] = function(){}不支持对同一个元素的同一个事件注册多个事件监听器，后定义的事件会覆盖先定义的事件。
4.事件捕获的小实验，代码如下：
实验一：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: yellow;
} div{
background-color: red;
padding: 100px;
}
img{
padding: 50px;
} </style>
</head>
<body id="body">
<div id="div">
<img src="frame.gif" id="img" />
</div>
<script type="text/javascript">
function onBody(event){
console.log("event capture in body"); }
function onDiv(event){
console.log("event capture in div");
event.bubbles=true;
}
function onImg(event){
console.log("event capture in img");
event.bubbles=true;
}
window.onload=function(){
var aimg=document.getElementById("img");
aimg.addEventListener("click",onImg);
var adiv=document.getElementById("div");
adiv.addEventListener("click",onDiv);
var abody=document.getElementById("body");
abody.addEventListener("click",onBody,true);
}
</script>
</body>
</html>
这是一个简单的小实验，其中定义了三个function，分别为onDiv，onImg，onBody，其中onBody的第三个参数定义为true，说明该函数在事件捕获时执行。
在Chrome浏览器下，单击img部分得到的结果如下：
由于单击事件最直接的target是img，onbody添加了事件捕获时执行的函数，所以会输出第一行，第二行是事件直接触发img上的事件，输出第二行，第三行是事件冒泡时执行了定义在div上的函数，输出第三行。
实验二:
如果将onBody的addEventListener的第三个参数不添加或者改成false，那么onBody的函数就会在事件冒泡时执行，得到如下结果：
