事件流
描述的是从页面中接收事件的顺序。
- IE——事件冒泡流
- Netscape——事件捕获流
事件冒泡流：即事件最开始由具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。
事件捕获：不太具体的节点应该更早接受到事件，而最具体的节点最后接收到事件。
使用事件处理程序
1.HTML事件处理程序
缺点：HTML和JS代码紧密的耦合在一起，需要同时修改
<input type="button" value="按钮" id="btn1" onclick='alert("hello")'/>
或封装在一个函数内：
<input type="button" value="按钮2" id="btn2" onclick='showMes()'/>
<script>
function showMes(){
alert("hello world");
}
</script>
2.DOM0级事件处理程序
实际上DOM0级是不存在的，DOM0级指的是IE4和网景4.0最初支持的DHTML
较传统的方式：把一个函数赋值给一个事件的处理程序属性
<input type="button" value="按钮3" Id="btn3" />
btn3.onclick=function(){
alert("这是DOM0级事件处理程序");
}
//删除事件：
btn3.onclick=null;
3.DOM2级事件处理程序
DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener()
接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值（true表示事件捕获，false表示事件冒泡，一般为false，为了兼容各种浏览器）
<input type="button" value="按钮4" Id="btn4" />
var btn4=document.getElementById("btn4");
btn4.addEventListener('click',showMes2,false);
//删除事件
btn4.removeEventListener('click',showMes2,false);
跨浏览器解决
初步接触js封装思想
有关IE兼容内容暂时没看
var eventUtil={
//添加句柄
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}else{
element['on'+type]=handler;
}
},
//删除句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type]=null;
}
}
}
eventUtil.addHandler(btn3,'click',showMes);
事件对象event
在触发DOM上的事件时都会产生一个对象
1.DOM中的事件对象
（1）type属性，用于获取事件类型
（2）target属性，用于获取事件目标
（3）stopPropagation()方法 ，用于阻止事件冒泡
（4）preventDefault()方法，阻止事件的默认行为
function showMes(event){
alert("event是DOM事件上的对象！");
alert(event.target.nodeName);//event.type
event.stopPropagation();
}
事件冒泡与事件捕获要是同时进行怎么办
我们的浏览器更“喜爱”事件捕获：它会先把useCapture为false的元素绑定事件放到一边，按照事件捕获正常的顺序执行useCapture为true的元素绑定事件，最后在按照事件冒泡顺序执行useCapture为false。
