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>