给列表元素添加点击事件：
在javaScript中，添加到页面上的事件处理程序的数量，将直接关系到页面的整体运行性能。
<li>标签的数量很大时，循环为每个子元素添加事件，绝非好方法。
有一种优雅的方法，就是事件委托。
使用事件委托只为<ul>元素添加一个onclick事件处理程序。
因为有事件冒泡机制，单击每个<li>标签时，都会被这个函数处理。
1 <!DOCTYPE html> 2 <html lang="en"> 3 ?4 <head> 5 ????<meta charset="UTF-8"> 6 ????<meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 ????<meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 ????<title>Document</title> 9 </head>10 11 <ul id="container">12 ????<li>1</li>13 ????<li>2</li>14 ????<li>3</li>15 ????<li>4</li>16 ????<li>5</li>17 </ul>18 19 <body>20 ????<script>21 ????????document.getElementById(‘container‘).addEventListener(‘click‘, function (event) {22 ????????????var target = event.target;23 ????????????console.log(event)24 ????????????if (target.tagName == ‘LI‘) {25 ????????????????alert(target.innerText);26 ????????????}27 ????????},false);28 ????</script>29 </body>30 31 </html>JS事件委托应用场景
原文地址：https://www.cnblogs.com/knuzy/p/10470978.html