事件委托
对”事件处理程序过多”问题的解决方案就是事件委托,事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
比如click事件会一直冒泡到document层次,可以为整个页面指定一个onclick事件处理程序,而不必给每个可点击的元素分别添加事件处理程序。
<div>
<ul id="myLinks">
<li id="doSomethine">doSomethine</li>
<li></li>
<li></li>
</ul>
</div>
<script src="EventUtil.js"></script>
<script>
var list = document.getElementById('myLinks');
EventUtil.addHandler(list,"click",function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch (target.id) {
case "doSomethine":
document.title = "changed";
break
}
});
</script>
//兼容跨浏览器的事件对象
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;
}
},
getEvent: function (event) {
return event ? event : window.event;
},
getTarget: function (event) {
return event.target || event.srcElement;
},
preventDefault: function (event) {
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
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;
}
},
stopPropagation: function (event) {
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
},
getCharCode: function (event) {
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
}
}
};
由于所以列表项都是这个元素的子节点,而且它们的事件会冒泡,所以单击事件最终会被这个函数处理。