|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</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">我是原生态DIV</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
$("#cont").prepend("<div class='created'>我是原生态DIV1</div>")
})
$("#del").click(function(){
$("div").remove(".created:first")
})
$("#onbut").click(function(){
$("#pp,#cont").on(" mouseover click",function(){ //在多个控制器上绑定多个事件
alert("1111111111111111111111111111")
})
$("#delbut").click(function(){
$("#pp,#cont").off("mouseover click") //在部分控制器移除了绑定的事件，也可部分
})
})
})
</script>
</body>
</html> ====================================
on()的原理：
实例：
<div class="left">
<p class="aaron">
<a>目标节点</a> //点击在这个元素上
</p>
</div>
给出如下代码：
$("div").on("click","p",fn)
事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数
事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数
绑定2个事件
$("elem").on("mousedown mouseup",fn)
删除一个事件
$("elem").off("mousedown")
删除所有事件
$("elem").off("mousedown mouseup")
快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁$("elem").off()
|
