DOM 事件
一、事件流
事件流描述的是从页面中接受事件的顺序。
IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流
事件冒泡：
事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。------由内到外
事件捕获：
不太具体的节点应该更早的接收到事件，具体的节点最后接收到事件。----由外到内
事件处理程序：
HTML事件处理程序：
缺点：html和js 紧密的耦合在一起。
DOM0级事件处理程序：
是一种较传统的方式，把一个函数赋值给一个事件处理程序的属性。在第四代web浏览器中出现。
优势： 目前支持的比较好，用的比较多。简单，跨浏览器的优势。
元素.事件=null;//删除DOM0级事件
DOM2级事件处理程序（IE不支持）：
定义了两个方法：用于处理指定和删除时间处理程序的操作。
addEventListener()和removeEventListener():接收三个参数：要处理的事件名（不带on）、作为事件处理程序的函数、boolean（true：在捕获阶段处理事件处理程序。false：在冒泡阶段处理事件处理程序。）
可以添加多个事件处理程序。按顺序执行。
IE事件处理程序：
添加事件和删除事件分别是：attachEvent()和detachEvent()：接收两个参数：要处理的事件名（必须带on）、作为事件处理程序的函数。
不使用第三个参数的原因是：IE8及其更早的浏览器版本只支持事件冒泡。所以默认冒泡。
支持IE事件处理程序的浏览器：IE和OPERA.
跨浏览器的事件处理程序：
var eventUtil={
//添加
addHandler:function(element,type,handler){
//是否支持dom2级
if(element.addEventListener){
element.addEventListener(type,handler,false);
//是否支持ie
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
//dom0级
}else{
//js中，所有用.的地方都可以用[]代替。element.onclick===element['onclick']此处不能用.,因此替换为[]
element['on'+type]=handler;
}
},
//删除
delHandler:function(element,type,handler){
//是否支持dom2级
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
//是否支持ie
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
//dom0级
}else{
//js中，所有用.的地方都可以用[]代替。element.onclick===element['onclick']此处不能用.,因此替换为[]
element['on'+type]=null;
}
}
}
事件对象：
在触发DOM上的事件时都会产生一个对象。
事件对象EVENT.
DOM中的事件对象：
（1）type 获取事件类型（click,mouseover,mouseout....）
（2）target 获取事件目标(即事件所在的dom元素)
（3）stopPropagation() 阻止事件冒泡
（4）preventDefault() 阻止事件的默认行为
eg：<a href='#'>超链接</a> 默认行为是点击跳转
IE中的时间对象：
（1）type 获取事件类型（click,mouseover,mouseout....）
（2）srcElement 获取事件目标(即事件所在的dom元素)
（3）cancelBubble属性 阻止事件冒泡 true 阻止冒泡，false 不阻止冒泡
（4）returnValue属性 阻止事件的默认行为 false 阻止事件默认行为
eg：<a href='#'>超链接</a> 默认行为是点击跳转
eventUtil中再添加以下方法：
getEvent:function(event){
//在ie8 之前的浏览器，必须用window.event才能获取到event
return event?event:window.event;
},
getType:function(event){
return event.type;
},
getElement:function(event){
return event.target || event.srcElement;
},
//阻止默认事件
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
事件类型：
鼠标事件，键盘事件。
键盘事件：
keyDown：按下键盘上任意键触发，如果按住不放的话，会重复触发此事件
keyPress：按下键盘上字符键触发，如果按住不放，会重复触发此事件。
keyUp: 释放键盘上的键时触发。
event 对象的keyCode属性用于得到键盘对应键的键码值。