标签：
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; // 使用示例 <ul id="list"> <li id="item1">Simon</li> <li id="item2">Kenner</li> <li id="item3">Erik</li> </ul> <button id="btn">Change</button> // 还是上面那段HTML，实现对list这个ul里面所有li的click事件进行响应 $.delegate($("#list"), "li", "click", clickHandle);
参考：
http://www.cnblogs.com/leo388/p/4461579.html
http://www.itxueyuan.org/view/5225.html
标签：
原文地址：http://www.cnblogs.com/bianxirui/p/4508753.html
