第二十八节 jQuery事件委托 

 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>

 

posted @ 2020-03-14 19:48  kog_maw  阅读(113)  评论(0)    收藏  举报