JavaScript事件流--事件冒泡、目标与事件捕获

1.事件冒泡

微软提出了名为事件冒泡的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。

因此上面的例子在事件冒泡的概念下发生click事件的顺序应该是p -> div -> body -> html -> document

2.事件捕获

网景提出另一种事件流名为事件捕获与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。

上面的例子在事件捕获的概念下发生click事件的顺序应该是document -> html -> body -> div -> p

关于冒泡的实例：

HTML：

<div class="abc" id="box">点击：演示冒泡</div>

JavaScript：

window.addEventListener('load', function () {
var box = document.getElementById('box');
box.addEventListener('click', function () { alert('Lee');}, false);//把false改为true，演示捕获
document.addEventListener('click', function () {alert('document');}, false);//把false改为true，演示捕获
}, false);