JavaScript事件代理是一种简单的技巧，通过它你可以把事件处理器添加到一个父级元素上，这样就不需要为每一个元素添加或者删除事件处理器，从而避免了内存泄露或者是遍历节点造成的性能下降。

 

如果整个页面都采用同样事件流方式，当红色蓝色区域触发相同事件，冒泡法：先处理蓝色区域请求，捕获法：先处理红色区域请求

如果不同层的元素使用的useCapture不同，会先从最外层元素往目标元素寻找设定为capture(捕获)模式的事件，到达目标元素执行目标元素的事件后，再寻原路往外寻找设定为bubbling(冒泡)模式的事件。（先捕获后反向冒泡）

练习如下（考虑绑定方式兼容性问题，但不确定是否正确，欢迎探讨）

function delegateEvent(element, tag, eventName, listener) {    // your implement    var wrapId=document.getElementById("element");//定位包裹层    if(wrapId.addEventListerner)//IE8+及Firefox、chrome    {        wrapId.addEventListerner("eventName",function(ev){            var e=window.event||ev;            var target=e.target||e.srcElement;            if(target.nodeName.toLowerCase==tag)                listener(e);//事件对象传递给listener        },false)//冒泡,true为捕获            }    if(wrapId.attachEvent)//IE低级版本只能用此方法绑定    {        wrapId.attachEvent("on"+"eventName",function(ev){            var e=window.event||ev;            var target=e.target||e.srcElement;            if(target.nodeName.toLowerCase==tag)                listener(e);//事件对象传递给listener        })//冒泡    }}$.delegate = delegateEvent;// 使用示例
     
    
      
Simon
    
      
Kenner
    
      
Erik
     
Change// 还是上面那段HTML，实现对list这个ul里面所有li的click事件进行响应$.delegate($("#list"), "li", "click", clickHandle);

 

类jQuery封装

$.on =function(selector, event, listener){    var element = $(selector);    if (element.addEventListener) {    element.addEventListener(event,listener,false);  }else{    event = "on" + event;    element.attachEvent(event,listener);  }};$.click =function(selector, listener) {    var element = $(selector);     if (element.addEventListener) {      element.addEventListener("click",listener,false);    }else{      element.attachEvent("onclick",listener);    }}$.un=function(selector, event, listener) {   var element = $(selector);   if (element.removeEventListener) {    element.removeEventListener(event,listener,false);  }else{    event = "on" + event;    element.detachEvent(event,listener);  }}$.delegate(selector, tag, event, listener) {    // your implement    var element=$(selector);    if(element.addEventListerner){        element.addEventListerner(event,function(ev){            var e=window.event||ev;            var target=e.target||e.srcElement;            if(target.nodeName.toLowerCase==tag)                listener(e);//事件对象传递给listener        },false)//冒泡,true为捕获    }    if(element.attachEvent){        element.attachEvent("on"+event,function(ev){            var e=window.event||ev;            var target=e.target||e.srcElement;            if(target.nodeName.toLowerCase==tag)                listener(e);//事件对象传递给listener        })    }};

 

参考：

http://www.cnblogs.com/leo388/p/4461579.html

http://www.itxueyuan.org/view/5225.html