1.事件冒泡
微软提出了名为事件冒泡的事件流。事件冒泡,事件会从最内层的元素开始发生,一直向上传播,直到document对象。
在事件冒泡的概念下发生click事件的顺序应该是p -> div -> body -> html -> document
2.事件捕获
网景提出另一种事件流名为事件捕获与事件冒泡相反,事件会从最外层开始发生,直到最具体的元素。
在事件捕获的概念下发生click事件的顺序应该是document -> html -> body -> div -> p
关于冒泡的实例:
HTML:
<div class="abc" id="box">点击:演示冒泡</div>
JavaScript:
var box = document.getElementById('box');
box.addEventListener('click', function () { alert('Lee');}, false);//把false改为true,演示捕获
document.addEventListener('click', function () {alert('document');}, false);//把false改为true,演示捕获
捕获与冒泡
默认情况下,事件使用冒泡事件流,不使用捕获事件流。
- 事件捕获:执行顺序(document->html->body->div)
- 事件冒泡:执行顺序(div->body->html->document)
- IE < 9:只支持事件冒泡
- IE 9+|chrome|firefox|safari:事件冒泡+事件捕获
未完待续