事件处理程序跨浏览器工具
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;
},
getTarget: 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;
}
}
};
内存和性能
在JavaScript中,每个函数都是一个对象,都需要占用一定的内存,内存中的对象越多,性能自然越差;DOM0级事件必须事先指定事件处理程序,导致DOM访问次数多,延迟整个页面交互就绪的时间。
- 事件委托
通过下面的代码可以只添加一个事件处理程序,占用的内存更少:
var parentNode = document.getElementById("myLinks");//上层对象
EventUtil.addHandler(parentNode,"click",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target.id){
case "":
//代码
break;
}
});
也可以为document对象添加一个事件处理程序,用于处理页面上的特定类型的事件:
优点:
- document对象很快就可以访问,可以在页面生命周期的任何时候为它添加事件处理程序。
- 在页面中设置事件处理程序所需的时间更少,只添加一个事件处理程序所需的DOM引用更少,所花的时间更少
- 整个页面占用的内存更少,能够提升整体性能
- 移除事件处理程序
每当给页面元素添加一个事件处理程序,运行中的浏览器代码就与支持页面交互的JavaScript代码之间建立一个连接。这种连接越多,页面执行就越慢。所以,通过事件委托的方式可以减少这种连接。另外,通过移除不需要的事件处理程序也是解决这个问题的一种方案。有时候,内存中可能会存在一些过时的事件处理程序,比如替换页面中的一些内容尤其是通过innerHTML替换部分内容的时候。因此,最好在替换内容的时候手动移除事件处理程序:
<div id = "myDiv">
<input type = "button" value = "Click Me" id = "myBtn" />
</div>
<script type = "text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function(){
//一些操作
btn.onclick = null;
document.getElementById("myDiv").innerHTML = "progressing...";
}
</script>
注意:在事件处理程序中删除文档元素也能阻止事件冒泡,目标元素在文档中是事件冒泡的前提。
导致“空事件处理程序”的另一种情况就是卸载页面的时候,如果没有清除干净事件处理程序,则会滞留在内存空间,最好通过onunload事件处理程序将他们移除。