JavaScript事件委托
js事件处理程序
总结笔记来了
首先，为什么要用事件委托，用一段代码解释下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DOM</title>
<style type="text/css">
#con li{
width: 100px;
height: 50px;
background-color: #1F747C;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<div>
<ul id="con">
<li id="list1">哈哈</li>
<li id="list2">洗洗</li>
<li id="list3">水水</li>
</ul>
</div>
</body>
</html>
如上面代码，如果要添加事件处理程序，我们一般做法是，给list1、list2、list3这个3个li元素分别添加事件处理程序，但是有没有想过，如果元素很多呢，我们还是一直用这样的方法添加吗？当然是不可能的，这样子，非累死程序员不可
这个时候事件委托就出现了，神一般的存在，解决了这一问题。
事件委托：利用事件冒泡这一特性，指定一个事件处理程序，管理这一类的所有事件，在他的父元素或更高元素设置事件处理程序，将子元素事件委托给父元素事件。达到省时省力的效果。
接下来用代码说明怎样使用事件委托
html代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DOM</title>
<script type="text/javascript" src="event.js"></script>
<script type="text/javascript" src="deal.js"></script>
<style type="text/css">
#con li{
width: 100px;
height: 50px;
background-color: #1F747C;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<div>
<ul id="con">
<li class="list">哈哈</li>
<li class="list">洗洗</li>
<li class="list">水水</li>
</ul>
</div>
</body>
</html>
event.js代码：
/**
* Created by ys on 2015/5/11.
*/
//跨浏览器的事件处理程序
//调用时候直接用domEvent.addEvent( , , );直接调用
//使用时候，先用addEvent添加事件，然后在handleFun里面直接写其他函数方法，如getEvent；
//addEventListener和attachEvent---都是dom2级事件处理程序
var domEvent = {
//element:dom对象，event:待处理的事件，handleFun:处理函数
//事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等
addEvent:function(element,event,handleFun){
//addEventListener----应用于mozilla
if(element.addEventListener){
element.addEventListener(event,handleFun,false);
}//attachEvent----应用于IE
else if(element.attachEvent){
element.attachEvent("on"+event,handleFun);
}//其他的选择dom0级事件处理程序
else{
//element.onclick===element["on"+event];
element["on"+event] = handleFun;
}
},
//事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等
removeEvent:function(element,event,handleFun){
//removeEventListener----应用于mozilla
if (element.removeEventListener) {
element.removeEventListener(event,handleFun,false);
}//detachEvent----应用于IE
else if (element.detachEvent) {
element.detachEvent("on"+event,handleFun);
}//其他的选择dom0级事件处理程序
else {
element["on"+event] = null;
}
},
//阻止事件冒泡
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;//IE阻止事件冒泡，true代表阻止
}
},
//阻止事件默认行为
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;//IE阻止事件冒泡，false代表阻止
}
},
//获得事件元素
//event.target--非IE
//event.srcElement--IE
getElement:function(event){
return event.target || event.srcElement;
},
//获得事件
getEvent:function(event){
return event? event : window.event;
},
//获得事件类型
getType:function(event){
return event.type;
}
};
/**
* Created by ys on 2015/5/11.
*/
window.onload = function(){
var ulList = document.getElementById('con');
domEvent.addEvent(ulList,'click',function(event){
event = domEvent.getEvent(event);
var target = domEvent.getElement(event);
switch (target.className){
case 'list':
alert('点击了我');
break;
}
});
};
接下来，几时测试时间了，我分别在IE7以上，chrome，firefox都测试过，可以
，nice，睡觉了。