javascript事件委托的方式绑定详解

function $bindAction(dom, event, listeners) {
 #这里的dom为绑定事件的元素，比如document.body
 #event为绑定的事件，比如click
 #listeners是待执行的事件对象
 $addEvent(dom, event, function(e) {
 #这里获取事件e
 #获取点击的元素src
 var e = e || window.event,
  src = e.target || e.srcElement,
  action,
  returnVal;

 #模拟冒泡的方式，先是src，然后是src.parentNode，再然后是src.parentNode.parent.Node
 #当前dom元素等于事件绑定的dom元素的时候，停止“冒泡”
 while (src && src !== dom) {
  #循环获取dom元素的attr-action属性，
  action = src.getAttribute('attr-action');
  #如果当前dom元素存在attr-action属性，并且事件对象中有该属性值的函数，执行这个函数
  #将事件e、当前dom元素、元素的属性attr-action值传给要执行的函数
  if (listeners[action]) {
  returnVal = listeners[action]({
   src : src,
   e : e,
   action : action
  });
  #如果上面的函数执行之后返回false，停止继续“冒泡”
  if (returnVal === false) {
   break;
  }
  }
  #获取当前dom元素的父元素节点
  src = src.parentNode;
 }
 });
};

function $addEvent(obj, type, handle) {
 if(!obj || !type || !handle) {
 return;
 }
 #绑定事件到多个对象，递归调用
 if( obj instanceof Array) {
 for(var i = 0, l = obj.length; i 

div#out > div#inner :

 

 
class="lia" attr-action="setWhat"
 
class="lia" attr-action="setWhat"
 
class="lia" attr-action="setWhat"
 
class="lib"
 
class="lib"
 
class="lib"
 

ul :

 
class="lia" attr-action="setWhat"
 
class="lia" attr-action="setWhat"
 
class="lia" attr-action="setWhat"
 
class="lib"
 
class="lib"
 
class="lib"