Biegral Blog

emmm....我竟然大半晚上的来更新，惊喜不惊喜，意外不意外，好了，废话不多说，写了好久，看看怎么实现手写原生JS实现事件代理。

<ul id="ulList">
  <li><a href="">Click Me</a></li>
  <li><a href="">Click Me</a></li>
  <li><a href="">Click Me</a></li>
</ul>

function delegateEvent(interfaceEle,selector,type,fn){
  if(interfaceEle.addEventListener){
    interfaceEle.addEventListener(type,eventCallback);
  }else{
    interfaceEle.attachEvent("on" + type,eventCallback);
  }
  function eventCallback(e){
    var e = e || window.e;
    var target = e.target || e.srcElement;
    if(matchSelector(target,selector)){
      if(fn){
        fn.call(target,e);
      }
    }
  }
}

function matchSelector(ele,selector){
  //传递ID
  if(selector.charAt(0) === '#'){
    return ele.id === selector.slice(1);
  }
 //传递class
  if(selector.charAt(0) === "."){
    return (ele.className + " ").indexOf(selector.slice(1) +" ")!=-1;
  }
 //传递tagName
  return ele.tagName.toLowerCase() === selector.toLowerCase();
}

var ul = document.getElementById("ulList");
delegateEvent(ul,"a","click",function(){
  alert("click trigger!");
})

以上代码就是实现题目的问题啦，亲自测试有效。

补充一点题外话：

JS的事件是很重要的一个专题模块，主要有IE和W3C两套事件触发机制，不过在DOM2级中已经统一了。当我们点击一个元素时，不仅点击了当前元素，也点击了它的父元素，祖父元素，以及整个页面。不同的浏览器对事件流的定义不一样。

IE认为，事件是先在具体元素上，然后逐级向上冒泡到document，称为冒泡事件

Netscape认为，事件先到document，然后向下层层传递。称为捕获事件

在DOM2级统一后，事件分为，捕获阶段->目标阶段->冒泡阶段。

之后几天将重读JS高程的事件模块，会继续补充。