事件委托利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件
未使用事件委托之前：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test javascript</title>
<script type="text/javascript">
window.onload = function() {
var EventUtil = {
addhandler:function(element,type,handler) {
if(element.addEventListenter) {
element.addEventListenter(type,handler,false);
} else if (element.attachEvent) {
element.attachEvent("on"+type,handler);
} else {
element["on"+type] = handler;
}
},
getEvent:function(event) {
return event?event:window.event;
},
getTarget:function() {
return event.target || event.srcElement;
},
preventDefault:function() {
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation:function() {
if(event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBuddle = true;
}
},
removehandler:function(element,type,handler) {
if(element.removeEventListenter) {
element.addEventListenter(type,handler,false);
} else if (element.detachEvent) {
element.detachEvent("on"+type,handler);
} else {
element["on"+type] = null;
}
}
}
var item1 = document.getElementById("1");
var item2 = document.getElementById("2");
var item3 = document.getElementById("3");
EventUtil.addhandler(item1,"click",function() {
alert("item1 is clicked");
});
EventUtil.addhandler(item2,"click",function() {
alert("item1 is clicked");
});
EventUtil.addhandler(item3,"click",function() {
alert("item1 is clicked");
});
}
</script>
</head>
<body>
<ul id="myLinks">
<li id="1">item1</li>
<li id="2">item2</li>
<li id="3">item3</li>
</ul>
</body>
</html>
使用事件委托后：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test javascript</title>
<script type="text/javascript">
window.onload = function() {
var EventUtil = {
addhandler:function(element,type,handler) {
if(element.addEventListenter) {
element.addEventListenter(type,handler,false);
} else if (element.attachEvent) {
element.attachEvent("on"+type,handler);
} else {
element["on"+type] = handler;
}
},
getEvent:function(event) {
return event?event:window.event;
},
getTarget:function() {
return event.target || event.srcElement;
},
preventDefault:function() {
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation:function() {
if(event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBuddle = true;
}
},
removehandler:function(element,type,handler) {
if(element.removeEventListenter) {
element.addEventListenter(type,handler,false);
} else if (element.detachEvent) {
element.detachEvent("on"+type,handler);
} else {
element["on"+type] = null;
}
}
}
var list = document.getElementById("myLinks");
EventUtil.addhandler(list,"click",function(event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target.id) {
case "1":
alert("item1 is clicked");
break;
case "2":
alert("item1 is clicked");
break;
case "3":
alert("item1 is clicked");
break;
}
});
}
</script>
</head>
<body>
<ul id="myLinks">
<li id="1">item1</li>
<li id="2">item2</li>
<li id="3">item3</li>
</ul>
</body>
</html>