<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div id="container"> <input type="button" id="btn" class="listener" value="button" /> </div> <a href="###" id="btnadd" class="listener">添加一个按钮</a> </body> </html> <script> window.onload = function(){ /** @para parentId 包裹容器的id @para selector 容器内元素的选择器，支持id和className @para fn 元素上要执行的函数 */ function delegate(parent, eventType, selector, fn) { //参数处理 if(typeof parent === 'string') { var parent = document.getElementById(parent); !parent && alert('parent not found'); } if(typeof selector !== 'string') { alert('selector is not string'); } if(typeof fn !== 'function') { alert('fn is not function'); } function handle(e){ //获取event对象 //标准DOM方法事件处理函数第一个参数是event对象 //IE可以使用全局变量window.event var evt = window.event ? window.event : e; //获取触发事件的原始事件源 //标准DOM方法是用target获取当前事件源 //IE使用evt.srcElement获取事件源 var target = evt.target || evt.srcElement; //获取当前正在处理的事件源 //标准DOM方法是用currentTarget获取当前事件源 //IE中的this指向当前处理的事件源 var currentTarget= e ? e.currentTarget : this; //在IE 9下 window.event 与 e 不同 evt没有currentTarget属性,e才有currentTarg alert("src id==="+target.id+" curent target id=="+currentTarget.id); if(target.id === selector || target.className.indexOf(selector) != -1){ fn.call(target); } } parent[eventType]=handle; } delegate('container', 'onclick', 'listener', function(){ alert(this); }); //新增一个元素 document.getElementById("btnadd").onclick=function(){ var btn = document.createElement("input"); btn.setAttribute("value","点击我试试"); btn.setAttribute("type","button"); btn.setAttribute("id","newbutton"); btn.className = 'class="listener"'; //没有监听新按钮的onclick事件 document.getElementById("container").appendChild(btn); } } </script>
原理：都是利事件冒泡实现事件委派
live方法是固定把事件都绑定在了document上，而delegate 把事件绑定了提供的父元素上
delegate减少了冒泡次数，效率会更高些