【初级】事件代理

简单实现一个事件代理:

function delegate(agent, type, selctor, fn) {
  // agent.addEventListener(type,fn) 如果是这样 fn 中的 this 会指向 agent
  agent.addEventListener(type,function(e){
      let target = e.target;         // target指向实际点击的最里层的元素
      let ctarget = e.currentTarget; // ctarget会永远指向agent

      while(target != ctarget){
          if(target.matches(selctor)){
            // 改变 this 的指向
            fn.call(target, e);
            return;
          }
          target = target.parentNode;
      }
  }, false)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

参考: JavaScript事件委托原理及实现 #65open in new window