JavaScript与HTML之间的交互式通过事件实现的，事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间，可以使用监听器来预订事件。
事件流
事件流就是指从页面中接收事件的顺序
分为事件冒泡，事件捕获和DOM事件流
事件冒泡
以下面HTML页面为例
<!DOCTYPE html>
<html>
<head>
<title>事件详解</title>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>
如果你单击了页面中的div元素，那么这个click事件就会按照如下顺序传播
1.div
2.body
3.html
4.document
兼容性:
1.所有现代浏览器都支持事件冒泡，不过在具体实现上有差别；
2.IE9、Firefox、Chrome、Safari将事件一直冒泡到windows对象。
事件捕获
还是以上面的HTML页面为例
单击div元素将会以下列顺序出发click事件
1.document
2.html
3.body
4.div
兼容性
1.IE9、Firefox、Chrome、Safari支持这种事件流模型
2.但是这些浏览器都是从window对象开始捕获事件的
3.由于老版本浏览器不支持，很少人使用事件捕获，建议大家使用事件冒泡
DOM事件流
“DOM2级事件”规定事件流包含三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段
首先发生事件捕获，为截获事件提供机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。还是以前面的HTML页为例
在DOM事件流中，实际的目标(div)在捕获阶段，事件从document到html再到body后就停止了。下一个阶段是“处于目标”的阶段，在div上发生，并在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回文档。
兼容性:多数支持DOM流的浏览器明确要求捕获阶段不会涉及事件目标。但是IE9、Firefox、Chrome、Safari和opera9.5及更高版本都会在捕获阶段触发事件，
也就是说，现在有两个机会在目标对象上面操作事件。
IE8及更早版本不支持DOM事件流
扫一扫
1562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
