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

时间:2023-03-09 06:32:55
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);