<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>事件委托</title> <!-- 事件委托：利用事件冒泡的特性，将子节点事件委托给父节点 target;获取触发事件的元素 --> </head> <body> <ul id="ul"> <li id="one">按钮一</li> <li id="two">按钮二</li> <li id="thr">按钮三</li> </ul> <script> var ul=document.getElementById("ul"); ul.addEventListener("click",function (event){ if (event.target.id=="one"){ alert("1"); }else if(event.target.id=="two"){ alert("2"); }else if(event.target.id=="thr"){ alert("3"); } }) </script> </body> </html>