javascript 跨浏览器的事件系统3

这部分说一下最近非常流行的事件代理。事件代理的实现简单来说，是把事件绑定到目标元素的祖先元素上，然后通过冒泡或捕获得到事件源，然后再判定事件源是否等于目标元素再执行回调函数。由于对目标元素的判定有时非常模糊，因此通过判定即可调用回调函数，这样，我们就达到一个监听器为许多事件源服务的目的。对于性能一向非常不怎么样的IE6来说，实在帮了一个大忙。

假如，有一个无序列表，点击弹出它的innerHTML，如果按事件绑定的做法，代码大概是这样：

var addEvent = function(el,type,callback,data){
    if ( el.addEventListener ) {//如自定义对象就绑定回调函数了
      el.addEventListener( type, callback, !!data );
    } else if ( el.attachEvent ) {
      el.attachEvent( "on" + type, function(){
        return callback.call(el,window.event)
      } );
    }
  }
  var els = document.getElementsByTagName("li")
  for(var i=0,n=els.length;i<n;i++){
    addEvent(els[i],"click",function(){
      alert(this.innerHTML)
    })
  }
}

如果用事件代理的做法大概是这样：

var ul = document.getElementsByTagName("ul")[0]
addEvent(ul,"click",function(e){
  var el = e.srcElement || e.target;
  if(el.tagName === "LI")
    alert(el.innerHTML)
})

<!doctype html>
<html lang="zh-ch" id="html">
  <head>
    <meta charset="utf-8" />
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>
    <title>事件代理 by 司徒正美</title>

</script>

</head>
  <body id="body">
    <h1>事件代理</h1>
    <ul>
      <li>无序列表1</li>
      <li>无序列表2</li>
      <li>无序列表3</li>
      <li>无序列表4</li>
    </ul>
  </body>
</html>

但是这样复用性不好，我们需要一个真正的事件代理函数。如果用YUI与jQuery的人应该知道，这其中必然涉及到选择器，利用选择器进行匹配，实现上面的el.tagName === "LI"，只不过适用性更广罢了。但现在我们不可能搞鼓个选择器出来，那可不是一下子就能实现的东西，况且它与我们的主题，为简单起见，我们就使用原生的标签选择器。换言之，新函数的参数之一，就是目标元素的tagName。其次，我们需要一个或一些代理元素，就像上面例子那个ul元素。我在《事件冒泡》一文中也给出各元素冒泡的情况了，若无视不能冒泡的事件，那么元素大抵是分上浮到from元素与上浮到文档这两种情况，当然还有上浮到window的情况，但最高只能上浮document。现在我们无视这些情况，强制为document。

var delegate = function(a,type,callback){
   var els = document.getElementsByTagName(a);
   addEvent(document,type,function(e){
     var el = e.srcElement || e.target;
     for(var i=0,n=els.length;i<n;i++){
       if(el === els[i]){
         return callback.call(el,e)
       }
     }
   },true);
 }
 delegate("li","click",function(e){
   alert(this.innerHTML+e.type)
 });

<!doctype html>
<html lang="zh-ch" id="html">
  <head>
    <meta charset="utf-8" />
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>
    <title>事件代理 by 司徒正美</title>

}
    var aaa = function(){
        var li = document.createElement("li");
        li.innerHTML = "动态添加"+(aaa.aa++)
        document.getElementsByTagName("ul")[0].appendChild(li)
    }
    aaa.aa = 0
    </script>

</head>
  <body id="body">
    <ul>
      <li>无序列表1</li>
      <li>无序列表2</li>
      <li>无序列表3</li>
      <li>无序列表4</li>
    </ul>
    <button type="button" onclick="aaa()">动态添加</button>
  </body>
</html>

这里有个奇妙的现象，当我们执行delegate函数，LI元素的个数为4，每当我们动态添加一个时，它也会相应添加一个。轻松实现jQuery所谓的live函数。不过，当我们把els转换为纯数组时，它就失去这种动态性了。jQuery的选择器等价于getElementsByTagName吗？不等于！因此，我们要重新来过了！

var delegate = function(a,type,callback){
  var els = document.getElementsByTagName(a),
  tmp = [];
  for(var j=0,jn=els.length;j<jn;j++){
    tmp.push(els[j])
  }
  els = tmp;//强制转换为纯数组
  addEvent(document,type,function(e){
    var el = e.srcElement || e.target;
    for(var i=0,n=els.length;i<n;i++){
      if(el === els[i]){
        return callback.call(el,e)
      }
    }
  },true);
}

<!doctype html>
<html lang="zh-ch" id="html">
  <head>
    <meta charset="utf-8" />
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>
    <title>事件代理 by 司徒正美</title>

为了尽量接近现实中的复杂需求，我最后还是给出一个小型选择器吧，注意只能运行于IE8（要求是标准模式）与较新的标准浏览器下。为了实现jQuery.live的效果，我们对代码做了一些调整：

var $ = function(selector,context){
  context = context || document
  try{
    var els = context.querySelectorAll(selector),
    result = [],ri=0,i=0,n=els.length;
    for(;i<n;i++){
      result[ri++] = els[i]
    }
    return result;
  }catch(e){
    alert("你的浏览器不支持querySelectorAll")
  }
}
  var delegate = function(a,type,callback){
    addEvent(document,type,function(e){
      var els = $(a);
      var node = e.srcElement || e.target;
      for(var i=0,el;el = els[i++];){
        if(node === el){
          return callback.call(node,e)
        }
      }
    },true);
  }
  delegate("#list li","click",function(e){
    alert(this.innerHTML+e.type)
  });

<!doctype html>
<html lang="zh-ch" id="html">
  <head>
    <meta charset="utf-8" />
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>
    <title>事件代理 by 司徒正美</title>

</body>
</html>

就这样，一个粗糙的事件代理系统完成了。但有个问题，我们每次进入这个函数，就调用选择器，是不是很耗性能呢？因为动态添加的情况并不是每次都发生，我们只要比较原来的节点集合就行了，当发现原来的找不到，再调用选择器也不晚。第四部分我们将解决这问题，see you!