Javascript事件委託

時間 2019-11-20

原文原文鏈接

事件委託利用事件冒泡，只指定一個事件處理程序，就能夠管理某一類型的全部事件
未使用事件委託以前：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>

使用事件委託後：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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。