什么是事件？
简单来说，事件就是文档或浏览器窗口发生的一些特定的交互瞬间。它最早时是用作分担服务器运算负载的一种手段。后来DOM2级规范开始尝试以一种符合逻辑的方式来标准化DOM事件。但是它并没有规范所有的事件类型。后来，DOM3级又增强了DOM事件的API。我们所熟悉的BOM也支持一些事件， 但BOM事件长期并没有规范，而且它支持的这些事件与DOM事件的关系也不太明确。使用事件有时复杂，有时相对简单，难度会因为需求的不同而不同。
事件流
事件流描述是从页面中接收事件的顺序。举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
padding:40px;
}
#div1{
background:red;
}
#div2{
background:blue;
}
#div3{
background:green;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv1= document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
function fn (){
alert(this.id)
}
oDiv1.onclick = fn;
oDiv2.onclick = fn;
oDiv3.onclick = fn;
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>效果展示：
当点击绿色DIV时，会依次弹出三次三个Id，分别是Div1、Div2、Div3。并不是因为他们的样式表现，而是因为html结构。如下代码，结果同上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
padding:40px;
}
#div1{
background:red;
}
#div2{
background:blue;
}
#div3{
background:green;
position: absolute;
top:300px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv1= document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
function fn (){
alert(this.id)
}
oDiv1.onclick = fn;
oDiv2.onclick = fn;
oDiv3.onclick = fn;
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
事件流包含两个内容：
- 事件冒泡流
- 事件捕获流
事件冒泡
先说一下，如果你点击了某个按钮，你也一定单击了它的父级，父级的父级的父级......
拿上述的两个例子，事件冒泡就是从事件开始的元素接收然后逐级向上传播到window对象，
<div>--><body>--><html>-->document
所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。IE5.5及更早版本中的事件冒泡会跳过<html>元素，其他浏览器（IE9、Firefox、Chrome、Safari）则将事件一直冒泡到window对象。
首先，点击oDiv1对象，然后触发点击事件，执行fn函数，然后传播事件到它的父级oDiv2，如果oDiv2接收到一个点击事件，那么他就执行fn函数。（事件函数绑定：把一个函数与事件进行绑定，事件发生时执行函数）再传播事件到oDiv2的父级oDiv3，如果oDiv3接收到一个点击事件，那么他就执行fn函数。
如果我们删除
oDiv2.onclick = fn;这行代码，结果依然会弹出id为Div1的id，那么为什么会出现这种情况呢？因为这种操作并没影响oDiv2事件的发生和接收。会影响的只是事件发生以后要做的事情，即fn函数的执行，没有绑定就不会执行，所以没有显示，但是它还是会把事件传播给oDiv1，而oDiv1绑定了fn函数，所以，它弹出了oDiv1的id。
实例：下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width:100px;
height:200px;
border:1px solid #000;
background:pink;
display: none
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementsByTagName('input')[0];
var oDiv = document.getElementById('div')
oBtn.onclick = function(){
oDiv.style.display = "block";
}
document.onclick = function(){
oDiv.style.display = 'none';
}
}
</script>
</head>
<body>
<input type="button" value="下拉按钮"/>
<div id="div"></div>
</body>
</html>执行的时候按钮怎么都不会打开下拉列表，因为当点击按钮的时候，触发点击事件，执行绑定函数：
function(){
oDiv.style.display = "block";
}正常情况下，下拉列表会出现，但是因为下段代码出现导致出现没打开的现象
document.onclick = function(){
oDiv.style.display = 'none';
}document.onclick = function(){
setTimeout(function(){
oDiv.style.display = 'none';
},1000)//1s之后执行
}如此看来，事件冒泡好像变得有点麻烦，缺点变得显而易见，那么为什么还要把它设置为默认存在的呢？因为他的优点不可忽略。
事件冒泡的优点：
假如事件冒泡不存在，我们还是实现如上效果：点击按钮下拉出现，点击除按钮以为的任何元素下拉列表消失。
那么，我们要做的是给页面里除按钮以外的所有元素都加上点击事件，这样庞大的工程......像我是绝对做不下去的。但是如果有事件冒泡这种事件流，就很方便，我们 只需要给共同的父级加事件处理例如：body标签，利用事件冒泡，用任何一个子元素都会把事件传播给文档，让文档去做这件事，会轻松很多。解决上面出现的问题，只需要阻止oBtn的事件冒泡就可以了。
event.cancleBubble = true;//默认情况为false实例：分享到
子级冒泡到父级
