<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.0.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
// 事件委托：把本应该添加在某个节点上的事件添加在另一个节点上，就叫做事件委托
// 把应该添加在li标签身上的click事件添加在ul身上，使用on给ul绑定事件时，多传入一个选择器，这个选择器选中的是本应该处理该事件的标签。当用户点击了某一个li后，会把这个时间转发到ul身上，ul拿到这个时间后，会寻找选择器所对应的标签，通过event.target属性得到触发事件的元素，最终由这个元素来执行cilck事件
$('ul').on('click','li', function(event){
console.log(event.target);
console.log(event.currentTarget);
})
})
</script>
</head>
<body>
<ul>
<li>数据1</li>
<li>数据2</li>
<li>数据3</li>
<li>数据4</li>
<li>数据5</li>
<li>数据6</li>
<li>数据7</li>
<li>数据8</li>
<li>数据9</li>
<li>数据10</li>
</ul>
</body>
</html>
