先来段代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>JS常用事件区分</title>
</head>
<script src="jquery-3.3.1.js"></script>
<body> <div id="div">
<button id="btn01">只能点击我一次</button>
<button id="btn02">我绑定俩事件（a，b）</button>
<button id="btn03">解除2所有事件</button>
<button id="btn04">解除2的事件b</button>
<button id="btn05" class="myclass">创建一个按钮样式，样式为myclass</button>
<button id="btn06">解绑myclass的事件</button>
</div> <!-- 脚本 -->
<script type="text/javascript"> $(function() {
// 一次点击
$("#btn01").one('click', function(event) {
alert("我只会出来一次哦");
}); // 单击事件
$("#btn02").click(function(event) {
/* Act on the event */
alert("我是默认事件");
});
//使用别名创建一个点击事件，被移除不影响原本的click
$("#btn02").on("click.b", function(event) {
/* Act on the event */
alert("我是新添加的事件");
}); //删除btn02的click事件
$("#btn03").click(function(event) {
//$("body").off("click", "button");错误写法
$("#btn02").off("click");
}); $("#btn04").click(function(event) {
//删除btn02的click.b事件，保留原本的click事件
$("#btn02").off("click.b");
}); // btn05
$("body").on('click', ".myclass", function(event) {
/* Act on the event */
$("body").append("<button id='btn05' class='myclass'>样式为myclass</button>");
}); /*
当将btn05下面的方法换成这个后，使用$("body").off("click", "**");将无效
$("#div").on('click', ".myclass", function(event) {
$("#div").append("<button id='btn05' class='myclass'>样式为myclass</button>");
});
*/
// btn06,按钮6点击时，解绑掉body下的所有.myclass预绑定的事件
$("#btn06").click(function(event) {
//清除body下所有有.myclass样式的click事件
// $("body").off("click", ".myclass"); //清除绑定在body身上的所有冒泡事件
$("body").off("click", "**"); });
}) </script> </body>
</html>