js的事件冒泡
先来段代码
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">只能点击我一次</button> 12 <button id="btn02">我绑定俩事件（a，b）</button> 13 <button id="btn03">解除2所有事件</button> 14 <button id="btn04">解除2的事件b</button> 15 <button id="btn05" class="myclass">创建一个按钮样式，样式为myclass</button> 16 <button id="btn06">解绑myclass的事件</button> 17 </div> 18 19 <!-- 脚本 --> 20 <script type="text/javascript"> 21 22 $(function() { 23 // 一次点击 24 $("#btn01").one('click', function(event) { 25 alert("我只会出来一次哦"); 26 }); 27 28 // 单击事件 29 $("#btn02").click(function(event) { 30 /* Act on the event */ 31 alert("我是默认事件"); 32 }); 33 //使用别名创建一个点击事件，被移除不影响原本的click 34 $("#btn02").on("click.b", function(event) { 35 /* Act on the event */ 36 alert("我是新添加的事件"); 37 }); 38 39 //删除btn02的click事件 40 $("#btn03").click(function(event) { 41 //$("body").off("click", "button");错误写法 42 $("#btn02").off("click"); 43 }); 44 45 $("#btn04").click(function(event) { 46 //删除btn02的click.b事件，保留原本的click事件 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'>样式为myclass</button>"); 55 }); 56 57 58 /* 59 当将btn05下面的方法换成这个后，使用$("body").off("click", "**");将无效 60 $("#div").on('click', ".myclass", function(event) { 61 $("#div").append("<button id='btn05' class='myclass'>样式为myclass</button>"); 62 }); 63 */ 64 // btn06,按钮6点击时，解绑掉body下的所有.myclass预绑定的事件 65 $("#btn06").click(function(event) { 66 //清除body下所有有.myclass样式的click事件 67 // $("body").off("click", ".myclass"); 68 69 //清除绑定在body身上的所有冒泡事件 70 $("body").off("click", "**"); 71 72 }); 73 }) 74 75 </script> 76 77 </body> 78 </html>
