unbind解綁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 300px;
height: 200px;
background-color: green;
}
p {
width: 100px;
height: 30px;
background-color: red;
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//用什么方式綁定事件,最好用對(duì)應(yīng)的方式解綁事件
//bind括號(hào)中寫(xiě)什么事件的名字就會(huì)把這個(gè)事件解綁,會(huì)把這個(gè)元素的這個(gè)點(diǎn)擊的多個(gè)事件都會(huì)解綁
//對(duì)象.click()這種方式添加的事件也可以使用unbind解綁
//括號(hào)中沒(méi)有任何參數(shù),此時(shí)該元素的所有的事件全部解綁
//同時(shí)解綁多個(gè)事件---每個(gè)事件的名字中間用空格即可
//第一個(gè)按鈕為div綁定事件
$("#btn").click(function () {
// //div的點(diǎn)擊事件
$("#dv").bind("click", function () {
console.log("div被點(diǎn)了");
}).bind("click", function () {
console.log("div點(diǎn)第二個(gè)點(diǎn)擊");
});
//鼠標(biāo)進(jìn)入
$("#dv").bind("mouseenter", function () {
$(this).css("backgroundColor", "blue");
});
//鼠標(biāo)離開(kāi)
$("#dv").bind("mouseleave", function () {
$(this).css("backgroundColor", "#00ffb8");
});
// $("#dv").click(function () {
// console.log("哈哈");
// });
});
//第二個(gè)按鈕為div解綁事件
$("#btn2").click(function () {
//解綁的是點(diǎn)擊事件,所有的點(diǎn)擊事件全部移除
//$("#dv").unbind("click");
//括號(hào)中沒(méi)有任何參數(shù),此時(shí)該元素的所有的事件全部解綁
//$("#dv").unbind();
//同時(shí)解綁多個(gè)事件
//$("#dv").unbind("mouseenter mouseleave");
});
});
</script>
</head>
<body>
<input type="button" value="綁定事件" id="btn"/>
<input type="button" value="解綁事件" id="btn2"/>
<div id="dv"></div>
</body>
</html>
undelegate解綁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 300px;
height: 200px;
background-color: green;
}
p {
width: 100px;
height: 30px;
background-color: red;
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//用什么方式綁定事件,最好用對(duì)應(yīng)的方式解綁事件
//bind括號(hào)中寫(xiě)什么事件的名字就會(huì)把這個(gè)事件解綁,會(huì)把這個(gè)元素的這個(gè)點(diǎn)擊的多個(gè)事件都會(huì)解綁
//對(duì)象.click()這種方式添加的事件也可以使用unbind解綁
//括號(hào)中沒(méi)有任何參數(shù),此時(shí)該元素的所有的事件全部解綁
//同時(shí)解綁多個(gè)事件---每個(gè)事件的名字中間用空格即可
//delegate綁定事件對(duì)應(yīng)的方式的解綁方式
//點(diǎn)擊第一個(gè)按鈕,div有自己的點(diǎn)擊事件,有鼠標(biāo)進(jìn)入和鼠標(biāo)離開(kāi)事件
//同時(shí)為p綁定點(diǎn)擊事件
$("#btn").click(function () {
//為div綁定事件
$("#dv").click(function () {
console.log("div被點(diǎn)了");
}).mouseenter(function () {
console.log("鼠標(biāo)進(jìn)來(lái)了");
}).mouseleave(function () {
console.log("鼠標(biāo)離開(kāi)了");
});
//在div中創(chuàng)建一個(gè)p,同時(shí)綁定點(diǎn)擊事件
$("<p>這是一個(gè)p</p>").appendTo($("#dv"));
//為p綁定事件
$("#dv").delegate("p", "click", function () {
console.log("啊~p被點(diǎn)了");
});
$("#dv").delegate("p", "mouseenter", function () {
console.log("p的鼠標(biāo)進(jìn)入");
});
});
//第二個(gè)按鈕解綁事件
$("#btn2").click(function () {
//p的點(diǎn)擊事件沒(méi)有了,移除了p的所有的事件
//$("#dv").undelegate();
//移除的是p的點(diǎn)擊事件
$("#dv").undelegate("p", "click");
//可以移除多個(gè)事件,但是每個(gè)事件之間用空格隔開(kāi)
$("#dv").undelegate("p", "click mouseenter");
});
});
</script>
</head>
<body>
<input type="button" value="綁定事件" id="btn"/>
<input type="button" value="解綁事件" id="btn2"/>
<div id="dv">
</div>
</body>
</html>
off解綁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 300px;
height: 200px;
background-color: green;
}
p {
width: 100px;
height: 30px;
background-color: red;
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//用什么方式綁定事件,最好用對(duì)應(yīng)的方式解綁事件
//bind括號(hào)中寫(xiě)什么事件的名字就會(huì)把這個(gè)事件解綁,會(huì)把這個(gè)元素的這個(gè)點(diǎn)擊的多個(gè)事件都會(huì)解綁
//對(duì)象.click()這種方式添加的事件也可以使用unbind解綁
//括號(hào)中沒(méi)有任何參數(shù),此時(shí)該元素的所有的事件全部解綁
//同時(shí)解綁多個(gè)事件---每個(gè)事件的名字中間用空格即可
//delegate綁定事件對(duì)應(yīng)的方式的解綁方式
//點(diǎn)擊第一個(gè)按鈕,div有自己的點(diǎn)擊事件,有鼠標(biāo)進(jìn)入和鼠標(biāo)離開(kāi)事件
//同時(shí)為p綁定點(diǎn)擊事件
$("#btn").click(function () {
//為div綁定事件
$("#dv").click(function () {//點(diǎn)擊事件
console.log("div被點(diǎn)了");
}).mouseenter(function () {//鼠標(biāo)進(jìn)入
console.log("鼠標(biāo)進(jìn)來(lái)了");
}).mouseleave(function () {//鼠標(biāo)離開(kāi)
console.log("鼠標(biāo)離開(kāi)了");
});
//在div中創(chuàng)建一個(gè)p,同時(shí)綁定點(diǎn)擊事件
$("<p>這是一個(gè)p</p>").appendTo($("#dv"));
//為p綁定事件
$("#dv").on("click", "p", function () {
console.log("啊~,p被點(diǎn)了");
});
$("#dv").on("mouseenter", "p", function () {
console.log("啊~,進(jìn)入到p里面來(lái)了,哦");
});
$("#dv").on("click", "span", function () {
console.log("哦,span被點(diǎn)了");
});
});
//第二個(gè)按鈕解綁事件
$("#btn2").click(function () {
//解綁事件
//父級(jí)元素和子級(jí)元素的所有的事件全部解綁
//$("#dv").off();
//把父級(jí)元素和子級(jí)元素的點(diǎn)擊事件解綁
//$("#dv").off("click");
//父級(jí)元素和子級(jí)的元素的多個(gè)事件,中間用空格
//$("#dv").off("click mouseenter");
//解綁p標(biāo)簽的點(diǎn)擊事件
//$("#dv").off("click","p");
//p的兩個(gè)事件都沒(méi)了
//$("#dv").off("click mouseenter","p");
//p的所有的事件全部解綁
//$("#dv").off("","p");
//干掉div中所有的子元素的點(diǎn)擊事件
//$("#dv").off("click","**");
});
});
//頁(yè)面加載
$(function () {
//為按鈕綁定點(diǎn)擊事件
$("#btn1").on("click", function () {
console.log("哈哈,我又變帥了");
});
});
</script>
</head>
<body>
<input type="button" value="哈哈,我是按鈕" id="btn1"/>
<input type="button" value="綁定事件" id="btn"/>
<input type="button" value="解綁事件" id="btn2"/>
<div id="dv">
<span>這是span</span>
</div>
</body>
</html>
|
