首页 > 代码库 > Javascript事件委托
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 = http://www.mamicode.com/false; "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 = http://www.mamicode.com/false; "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>Javascript事件委托
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。