【面试】手写原生js实现事件代理，并兼容浏览器

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){//传递IDif(selector.charAt(0) === '#'){return ele.id === selector.slice(1);}//传递classif(selector.charAt(0) === "."){return (ele.className + " ").indexOf(selector.slice(1) +" ")!=-1;}//传递tagNamereturn 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高程的事件模块，会继续补充。