|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<script type="text/javascript"></script>
<script type="text/javascript" src="jquery3/jquery-3.2.1.js"></script>
<style type="text/css">
div{
width: 200px;
height: 80px;
background-color: aquamarine;
}
</style>
</head>
<body>
<button type="button" id="add">add div</button>
<button type="button" id="del">del div</button>
<button type="button" id="onbut">綁定事件</button>
<button type="button" id="delbut">解除事件</button>
<button type="button" id="pp" value="88888">6666</button>
<div id="cont">
<div class="created">我是原生態(tài)DIV</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
$("#cont").prepend("<div class='created'>我是原生態(tài)DIV1</div>")
})
$("#del").click(function(){
$("div").remove(".created:first")
})
$("#onbut").click(function(){
$("#pp,#cont").on(" mouseover click",function(){ //在多個(gè)控制器上綁定多個(gè)事件
alert("1111111111111111111111111111")
})
$("#delbut").click(function(){
$("#pp,#cont").off("mouseover click") //在部分控制器移除了綁定的事件，也可部分
})
})
})
</script>
</body>
</html> ====================================
on()的原理：
實(shí)例：
<div class="left">
<p class="aaron">
<a>目標(biāo)節(jié)點(diǎn)</a> //點(diǎn)擊在這個(gè)元素上
</p>
</div>
給出如下代碼：
$("div").on("click","p",fn)
事件綁定在最上層div元素上，當(dāng)用戶觸發(fā)在a元素上，事件將往上冒泡，一直會(huì)冒泡在div元素上。如果提供了第二參數(shù)，那么事件在往上冒泡的過(guò)程中遇到了選擇器匹配的元素，將會(huì)觸發(fā)事件回調(diào)函數(shù)
事件綁定在最上層div元素上，當(dāng)用戶觸發(fā)在a元素上，事件將往上冒泡，一直會(huì)冒泡在div元素上。如果提供了第二參數(shù)，那么事件在往上冒泡的過(guò)程中遇到了選擇器匹配的元素，將會(huì)觸發(fā)事件回調(diào)函數(shù)
綁定2個(gè)事件
$("elem").on("mousedown mouseup",fn)
刪除一個(gè)事件
$("elem").off("mousedown")
刪除所有事件
$("elem").off("mousedown mouseup")
快捷方式刪除所有事件，這里不需要傳遞事件名了，節(jié)點(diǎn)上綁定的所有事件講全部銷(xiāo)毀$("elem").off()
|
