标签：
1 事件流：
DOM同时支持两种事件模型：捕获型事件（非IE，从document
到具体元素）和冒泡型事件（IE，从具体元素到document）。
2 事件处理程序
html事件处理程序，简单点就是在html 元素上面直接绑定一个onclick 类似的事件，缺点显而易见是有太强的耦合性
<input type="button" value="按钮" id="btn" onclick="showMes()">
Dom0 级事件处理程序，类似于document.getById().onclick=function(){} 这样类似的
3 DOM2级事件处理程序
DOM2级事件定义了两个方法（非IE）：用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。
IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件
4 事件对象
事件对象event
1、DOM中的事件对象
(1)、type:获取事件类型
(2)、target：事件目标
(3)、stopPropagation() 阻止事件冒泡
(4)、preventDefault() 阻止事件的默认行为
2、IE中的事件对象
(1)、type:获取事件类型
(2)、srcElement：事件目标
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的默认行为
下面通过一个具体例子来进行js封装和了解事件对象
index.html
<html>
<head>
<title>事件流</title>
<meta charset="utf-8">
<script src="js/event.js"></script>
<script src="js/script.js"></script>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="showMes()">
<input type="button" value="按钮2" id="btn2">
<input type="button" value="按钮3" id="btn3">
<a href="event.html" id="go">跳转</a>
</div>
</body>
</head>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;
}
},
getEvent:function(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;
}
}
}window.onload=function(){
var go=document.getElementById('go'),
box=document.getElementById('box');
eventUtil.addHandler(box,'click',function(){
alert('我是整个父盒子');
});
eventUtil.addHandler(go,'click',function(e){
//e=eventUtil.getEvent(e);
e=e || window.event;
alert(eventUtil.getElement(e).nodeName);
eventUtil.preventDefault(e);
eventUtil.stopPropagation(e);
});
}
标签：
原文地址：http://blog.csdn.net/buyingfei8888/article/details/43234545
