事件(四)

事件处理程序跨浏览器工具

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访问次数多，延迟整个页面交互就绪的时间。

1. 事件委托

通过下面的代码可以只添加一个事件处理程序，占用的内存更少：

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引用更少，所花的时间更少
• 整个页面占用的内存更少，能够提升整体性能

---

1. 移除事件处理程序

每当给页面元素添加一个事件处理程序，运行中的浏览器代码就与支持页面交互的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事件处理程序将他们移除。