先来段代码
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 ????????????//使用别名创建一个点击事件，被移除不影响原本的click34 ????????????$("#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 ????????????// btn0552 ????????????$("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>在某个元素身上绑定对子元素的时间，则只能让该元素解绑，其他人无效
js的事件冒泡
原文地址：https://www.cnblogs.com/webyyq/p/8977397.html