Javascript事件委托
事件委托利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件
未使用事件委托之前:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test javascript</title> <script type="text/javascript"> window.onload = function() { var EventUtil = { addhandler:function(element,type,handler) { if(element.addEventListenter) { element.addEventListenter(type,handler,false); } else if (element.attachEvent) { element.attachEvent("on"+type,handler); } else { element["on"+type] = handler; } }, getEvent:function(event) { return event?event:window.event; }, getTarget:function() { return event.target || event.srcElement; }, preventDefault:function() { if(event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, stopPropagation:function() { if(event.stopPropagation) { event.stopPropagation(); } else { event.cancelBuddle = true; } }, removehandler:function(element,type,handler) { if(element.removeEventListenter) { element.addEventListenter(type,handler,false); } else if (element.detachEvent) { element.detachEvent("on"+type,handler); } else { element["on"+type] = null; } } } var item1 = document.getElementById("1"); var item2 = document.getElementById("2"); var item3 = document.getElementById("3"); EventUtil.addhandler(item1,"click",function() { alert("item1 is clicked"); }); EventUtil.addhandler(item2,"click",function() { alert("item1 is clicked"); }); EventUtil.addhandler(item3,"click",function() { alert("item1 is clicked"); }); } </script> </head> <body> <ul id="myLinks"> <li id="1">item1</li> <li id="2">item2</li> <li id="3">item3</li> </ul> </body> </html>
使用事件委托后:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test javascript</title> <script type="text/javascript"> window.onload = function() { var EventUtil = { addhandler:function(element,type,handler) { if(element.addEventListenter) { element.addEventListenter(type,handler,false); } else if (element.attachEvent) { element.attachEvent("on"+type,handler); } else { element["on"+type] = handler; } }, getEvent:function(event) { return event?event:window.event; }, getTarget:function() { return event.target || event.srcElement; }, preventDefault:function() { if(event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, stopPropagation:function() { if(event.stopPropagation) { event.stopPropagation(); } else { event.cancelBuddle = true; } }, removehandler:function(element,type,handler) { if(element.removeEventListenter) { element.addEventListenter(type,handler,false); } else if (element.detachEvent) { element.detachEvent("on"+type,handler); } else { element["on"+type] = null; } } } var list = document.getElementById("myLinks"); EventUtil.addhandler(list,"click",function(event) { event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); switch(target.id) { case "1": alert("item1 is clicked"); break; case "2": alert("item1 is clicked"); break; case "3": alert("item1 is clicked"); break; } }); } </script> </head> <body> <ul id="myLinks"> <li id="1">item1</li> <li id="2">item2</li> <li id="3">item3</li> </ul> </body> </html>