1.事件流
事件流是页面接收事件的顺序
事件冒泡：由最具体的到最不具体的接收事件，比如说你点击一个按钮，这个按钮在div中，接下来是html，再接下来就是document文档
事件捕获：从最不具体的到最具体的接收事件，同样的你先获得一个文档，然后找到html，再到div，最后到按钮。
目前使用最多的是事件冒泡，对大多数浏览器来说，它是完全兼容的，可以放心使用。
2.事件处理
html级事件处理：button的点击事件
<button onclick="click1()">按钮</button>
<script>
function click1(){//函数名不能取click
alert("html事件处理");
}</script>
缺点：假如要对函数名称作出修改，当代码量非常大的时候，这是非常麻烦的，因为要修改的地方太多。
DOM0级事件处理
<button id="bnt1">按钮0</button>
<button id="btn2">按钮2</button>
<script>
var a=document.getElementById("bnt1");
a.onclick=function(){alert("DOM0级事件处理程序1")};
a.onclick=function(){alert("DOM0级事件处理程序2")};
//a.onclick=null;也可以赋空值
</script>
缺点：第一个onclick事件会被覆盖掉
DOM2级事件处理
<button id="btn2">按钮2</button>
var a=document.getElementById("bnt2");
a.addEventListener("click",function(){alert("DOM2级事件处理程序")});//可重复添加，克服了DOM1的缺点
a.addEventListener("click",demo1);
a.addEventListener("click",demo2);
function demo1(){alert("DOM2级事件处理程序1");}
function demo2(){alert("DOM2级事件处理程序2");}
a.removeEventListener("click",demo1);
</script>
优点：可以添加多个事件而不被覆盖
如果要考虑浏览器的版本问题，我们可以这样写
<script>
//因为要考虑到浏览器版本的问题所以我们可以这样写
var a1=document.getElementById("btn2");
if(a1.addEventListener){
a1.addEventListener("click",demo1);
}else if(a1.attachEvent){//浏览器版本<8
a1.attachEvent("onclick",dmeo1);
}else{
a1.onclick=demo1;
}
</script>
3.事件对象（事件的承载者）
<div id="div">
<button id="btn3">anniu</button>
<a href="http://www.w3school.com" id="aid">w3shool</a>
</div>
<script>
document.getElementById("btn3").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
document.getElementById("aid").addEventListener("click",showA);
function showType(event){
alert(event.type);//显示事件类型
alert(event.target);//显示事件目标
event.stopPropagation();//阻止事件冒泡不让它输出'div'
}
function showDiv()
{
alert("div");
}
function showA(event){
event.stopPropagation();
event.preventDefault();//阻止默认行为，即a标签的链接行为
}
</script>