JS的事件委托机制

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <ul id="myUi">
 9             <li id="li1">去百度</li>
10             <li id="li2">去京东</li>
11             <li id="li3">去淘宝</li>
12         </ul>
13         <script type="text/javascript">
14             document.getElementById('myUi').addEventListener('click',function (event) {
15                 let id = event.target.id
16                 switch (id){
17                     case 'li1':
18                         window.location.href = 'http://www.baidu.com'
19                         break;
20                     case 'li2':
21                         window.location.href = 'http://www.JD.com'
22                         break;
23                     default:
24                         window.location.href = 'http://www.taobao.com'
25                         break;
26                 }
27             })
28         </script>
29     </body>
30 </html>