JavaScript事件流之事件冒泡，事件捕获
首先普及事件流知识，所谓事件流指的是页面接收事件的先后顺序。
先说说事件流为什么会分为事件冒泡和事件捕获吧。就是在第四代浏览器（IE4和Netscape4）在处理事件流时候提出了相反的概念，即现在的IE是事件冒泡，Netscape是事件捕获。是不是有点晕好吧，继续有例子。
概念：
事件冒泡：事件最开始由最具体的元素接收（文档层次中嵌套最深的那个节点），然后逐级向上传播最不具体的节点（document）。
事件捕获：事件由最不具体的元素接收，最后传播至最具体的元素。
事件冒泡代码实例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件冒泡</title>
</head>
<body>
<div id="e">
<input id="btn" type="button" value="按钮">
</div>
<script type="text/javascript">
var e = document.getElementById('e');
var btn = document.getElementById('btn');
e.onclick = function (){
alert("你点击了div");
};
btn.onclick = function(){
alert("你点击了button");
}
</script>
</body>
</html>当我点击了按钮时候，运行结果图：
①先出现
②再出现
是不是很诧异
怎么会出现这种结果，没错，这就是因为事件冒泡的原因。
冒泡的顺序为：input->div->body->html->document,(仅是IE5.5及其以前)、IE9和safari,chrome,firefox,opera会冒泡到windows对象、
也就是说，在他的上层只要有事件就会被触发，所以，我们要防止事件冒泡，后面马上讲。
事件捕获是Nerscape唯一支持的事件模型，但是IE9和safari,chrome,firefox,opera也都支持事件捕获模型。由于老版本浏览器不支持事件捕获，所以很少有人用事件捕获，所以一般不考虑。
事件捕获代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件冒泡</title>
</head>
<body>
<div id="e">
<input id="btn" type="button" value="按钮">
</div>
<script type="text/javascript">
var e = document.getElementById('e');
var btn = document.getElementById('btn');
e.addEventListener('click',function(){
alert('你点击了div');
},true);
btn.addEventListener('click',function(){
alert('你点击了button');
},true);
</script>
</body>
</html>运行结果图：
①先出现
②再出现
所以事件捕获只做了解就行了。
事件冒泡处理方案：
function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;//IE阻止事件冒泡，true代表阻止
}
},
好了
。