给列表元素添加点击事件：
在javaScript中，添加到页面上的事件处理程序的数量，将直接关系到页面的整体运行性能。
<li>标签的数量很大时，循环为每个子元素添加事件，绝非好方法。
有一种优雅的方法，就是事件委托。
使用事件委托只为<ul>元素添加一个onclick事件处理程序。
因为有事件冒泡机制，单击每个<li>标签时，都会被这个函数处理。
<!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>Document</title>
</head> <ul id="container">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul> <body>
<script>
document.getElementById('container').addEventListener('click', function (event) {
var target = event.target;
console.log(event)
if (target.tagName == 'LI') {
alert(target.innerText);
}
},false);
</script>
</body> </html>