一、事件对象
事件对象：在DOM触发事件时，会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息。既然event是事件对象，那么它必然存在属性
①DOM中的事件对象event属性
（1）、type属性用于获取事件类型
（2）、target、srcElement<兼容IE事件>属性用于获取事件目标
（3）、stopPropagation()方法 用于阻止事件冒泡
（4）、preventDefault() 方法 阻止事件的默认行为
二、DOM2级事件处理程序
（1）、addEventListener() 用于处理指定事件处理程序操作
（2）、removeEventListener() 用于处理删除事件处理程序操作
三、IE事件处理程序
（1）、attachEvent() 用于处理指定事件处理程序操作
（2）、detachEvent() 用于处理移除事件处理程序操作
接收相同的两个参数，事件处理程序的名称和事件处理程序的函数。
四、跨浏览器的事件处理程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM事件机制</title>
<script type="text/javascript">
window.onload=function(){
var oButton=document.getElementById('button');
var oBox=document.getElementById('Box');
var oA=document.getElementById('a');
var eventUtils={
// element type事件类型 hander事件处理程序
addHandler:function(element,type,hander){
if (element.addEventListener) {
//DOM2级
element.addEventListener(type,hander,false)
}else if (element.attachEvent) {
//IE事件绑定
element.attachEvent('on'+type,hander)
}else{
//DOM0级
element['on'+click]=hander; };
},
removeHandler:function(element,type,hander){
if (element.removeEventListener) {
//DOM2级
element.removeEventListener(type,hander,false)
}else if (element.deltachEvent) {
//IE事件绑定
element.deltachEvent('on'+type,hander)
}else{
//DOM0级
element['on'+click]=null; };
}
};
eventUtils.addHandler(oButton,'click',showMessage);
eventUtils.addHandler(oBox,'click',function(){alert('oBox')});
eventUtils.addHandler(oA,'click',stopGo);
}
function showMessage(event){
console.info(event); //事件对象
console.info(event.type); //事件类型
console.info(event.target); //事件目标
event.stopPropagation(); //阻止事件冒泡
}
function stopGo(event){
console.info(event); //事件对象
console.info(event.type); //事件类型
console.info(event.target); //事件目标
event.preventDefault();//preventDefault() 方法 阻止事件的默认行为
alert('跳转');
}
</script>
</head>
<body>
<div id="Box">
<input type="button" name="" value="按钮" id="button" />
<a href="DomTest.html" id="a">跳转</a>
</div>
</body>
</html>
将上述跨浏览器事件处理程序代码抽成工具包
//事件处理
var eventUtils={
// element type事件类型 hander事件处理程序
//添加事件处理
addHandler:function(element,type,hander){
if (element.addEventListener) {
//DOM2级--冒泡事件
element.addEventListener(type,hander,false)
}else if (element.attachEvent) {
//IE事件绑定
element.attachEvent('on'+type,hander)
}else{
//DOM0级
element['on'+click]=hander; };
},
//移除事件处理
removeHandler:function(element,type,hander){
if (element.removeEventListener) {
//DOM2级
element.removeEventListener(type,hander,false)
}else if (element.deltachEvent) {
//IE事件绑定
element.deltachEvent('on'+type,hander)
}else{
//DOM0级
element['on'+click]=null; };
},
//获取事件对象
getEvent:function(event){
return event ? event : window.event;
},
//获取事件类型
getEventType:function(event){
return event.type
},
//获取事件目标
getEventTarget:function(event){
return event.target || event.srcElement;
},
//取消事件默认行为
getPreventDefalut:function(event){
event.preventDefault ? event.preventDefault() : event.returnValue==false;
/*if (event.preventDefault) {
event.preventDefault();
} else{
event.returnValue==false;
};*/
},
//阻止事件冒泡
stopPropagation:function(event){
event.stopPropagation ? event.stopPropagation() : event.cancelBubble();
/*if (event.stopPropagation) {
event.stopPropagation();
}else if (event.cancelBubble) {
event.cancelBubble(); //阻止IE事件冒泡
};*/
},
//获取选择器对象
getSelector:function(id){
return document.getElementById(id);
}
}