code first
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>JS常用事件区分</title> 6 </head> 7 <script src="jquery-3.3.1.js"></ script > 8 < body > 9 10 < div id = "div" > 11 < button id = "btn01" > can only click me once </ button > 12 < button id = "btn02" > I bind both event(a,b) </ button > 13 < button id ="btn03" > dismiss 2 all events </ button > 14 < button id ="btn04"> Dismiss 2's event b </button > 15 < button id = "btn05" class = "myclass" > create a button style with the style myclass < / button > 16 < button id = " btn06" > unbind the events of myclass > 18 19 <!-- script --> 20 < script type ="text/javascript" >21 22 $( function () { 23 // One click 24 $( " #btn01 " ).one( ' click ' , function (event) { 25 alert( " I will only come out once " ); 26 }); 27 28 // Click event 29 $( " #btn02 " ). click( function (event) { 30 /* Act on the event */ 31 alert( " I am the default event " ); 32 }); 33 // Use an alias to create a click event, which is removed without affecting the original click 34 $( " #btn02 " ).on( " click.b " , function (event) { 35 /* Act on the event */ 36 alert( " I am a newly added event " ); 37 }); 38 39 // Delete the click event of btn02 40 $( " #btn03 " ).click( function (event) { 41 // $("body").off("click", "button"); Wrong spelling 42 $( "#btn02").off( " click " ); 43 }); 44 45 $( " #btn04 " ).click( function (event) { 46 // Delete the click.b event of btn02 and keep the original click event 47 $( " #btn02 " ).off( " click.b " ); 48 }); 49 50 51 // btn05 52 $( " body " ).on( ' click ' , ".myclass " , function (event) { 53 /* Act on the event */ 54 $( " body " ).append( " <button id='btn05' class='myclass'>style myclass</button> " ); 55 }); 56 57 58 /* 59 When the method below btn05 is replaced with this, using $("body").off("click", "**"); will be invalid 60 $("# div").on('click', ".myclass", function(event) { 61 $("#div").append("<button id='btn05' class='myclass'>The style is myclass</button>"); 62 }); 63 */ 64 // btn06, when button 6 is clicked, unbind all pre-bound events under body 65 $( " #btn06 " ).click( function (event) { 66 // Clear all events under body Click event with .myclass style 67 // $("body").off("click", ".myclass"); 68 69 // Clear all bubbling events bound to body 70 $( " body " ).off( " click " , " ** " ); 71 72 }); 73 }) 74 75 </script> 76 77 </body> 78 </html>