事件委托在jQuery和KISSY内核中的应用

一直觉得jQuery中的 .live() 方法很神奇，居然可以对动态加入的元素进行绑定。今天终于弄明白了，原来这是通过使用事件委托实现的。

   $('a').live('click', function(){
      //code block1
   })
   

上面的这段代码可以约等于（但不完全等于，在最后说明了为什么）：

   $(document).bind('click', function(e){
      if(e.srcElement.tagName == 'a'){
         //code block1
      }
   })
   

此外，jQuery还有一个 .delegate() 方法，可以实现接近 .live() 的效果：

   $('#container').delegate('a','click',function(){
      //code block2
   })
   

jQuery在文档中查找#container，并使用click事件和’a'这一CSS选择器作为参数，把函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CSS选择器相匹配。如果两种检查的结果都为真的话，它就执行绑定的函数。
在KISSY 1.2版本中也引入了 .delegate() 方法。
这两种方法中，个人觉得还是 .delegate() 方法效率高。因为 .live() 方法需要把选择器匹配到的元素都包装成jQuery对象；而 .delegate() 方法只在委托的节点上监听冒泡事件。感觉用 .live() 方法进行事件委托比较鸡肋啊，可能这也是为什么其他js框架没有类似方法的原因吧。