jquery事件绑定 

 1     <body>
 2             <input type="button" id="J_btn_bind" value="bind方式绑定事件">
 3             <input type="button" id="J_btn_on" value="on方式绑定事件">
 4             <input type="button" id="J_btn_offAll" value="解除绑定事件">
 5             <ul class="cities">
 6                 <li>传智前端1</li>
 7                 <li>传智前端2</li>
 8                 <li>传智前端3</li>
 9                 <li>传智前端4</li>
10                 <li>传智前端5</li>
11             </ul>
12 
13     </body>
14 </html>
15 <script>
16     $(function(){
17         // bind方式绑定事件
18         $("#J_btn_bind").bind({
19             click:function(){
20                 alert('bind啊绑定的事件')
21             },
22             mouseenter:function(){
23                 $(this).css("background-color", "red");
24             }
25         })
26         // delegate方式绑定事件
27         $(".cities").delegate('li','click',function(event){
28             alert($(this).text());
29         })
30         // on方式绑定事件
31         $("#J_btn_on").on('click',function () {
32             $(".cities").append('<li>dengyanbo</li>')
33         })
34         // 解除事件绑定
35         $("#J_btn_offAll").on('click',function(){
36             $("#J_btn_on").off('click');
37 
38             $(".cities").undelegate('click');
39 
40             $("#J_btn_bind").unbind();
41         })
42     })
43 </script>

 

posted @ 2018-01-02 09:10  前端极客  阅读(157)  评论(0)  编辑  收藏  举报