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>