1 <!-- 事件委托就是利用事件冒泡的原理，把事件加到父级上，通过判断事件的来源的子集，执行相应的操作，事件委托首先可以极大的减少事件绑定的次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。 -->
2
3 <!DOCTYPE html>
4 <html lang="en">
5 <head>
6 <meta charset="UTF-8">
7 <title>Document</title>
8 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
9 <script type="text/javascript">
10 $(function(){
11 $('.list li').click(function(){
12 $(this).css({'backgroundColor':'red'})
13 })
14
15 // 新建一个li元素赋值给$li变量
16 var $li = $('<li>9</li>')
17 // 把新建的li元素，放入ul标签最后，由于上面不是用的事件委托，所以新增的li并没有点击事件
18 $('.list').append($li);
19
20
21 // $(this) 指委托的子元素
22 // $('.list').delegate('li','click',function(){
23 // $(this).css({'backgroundColor':'red'})
24 // });
25
26 var $li = $('<li>9</li>')
27 // 由于上面的是用的事件委托的方式，所以新增的li也会有点击事件
28 $('.list').append($li);
29
30 })
31 </script>
32 <style type="text/css">
33 .list{
34 background-color: gold;
35 list-style: none;
36 padding: 10px;
37 }
38 .list li{
39 height: 30px;
40 background-color: green;
41 margin: 10px;
42 }
43 </style>
44 </head>
45 <body>
46 <ul class="list">
47 <li>1</li>
48 <li>2</li>
49 <li>3</li>
50 <li>4</li>
51 <li>5</li>
52 <li>6</li>
53 <li>7</li>
54 <li>8</li>
55 </ul>
56 </body>
57 </html>
