一、事件绑定与解绑
1、click()-->单击事件(监听)
2、on()-->绑定事件
3、mouseenter()-->鼠标进入
4、mouseleave()-->鼠标离开
5、off()-->关闭事件
6、bind()-->绑定事件
7、event.stopPropagation()-->阻止冒泡
8、one()-->绑定事件(只能执行一次)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
}
.out{
position: absolute;
width: 200px;
height: 200px;
top: 20px;
left: 10px;
background-color: aqua;
}
.inner{
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background-color: red;
}
.out1{
position: absolute;
width: 200px;
height: 200px;
top: 300px;
left: 10px;
background-color: aqua;
}
.inner1{
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background-color: red;
}
.out2{
position: absolute;
width: 200px;
height: 200px;
top: 600px;
left: 10px;
background-color: aqua;
}
.inner2{
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background-color: red;
}
</style>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(function(){
/* 监听 */
$(".out").click(function(){
alert("click")
});
/* 绑定*/
$(".out").on("click",function(){
alert("on")
});
$(".inner").mouseenter(function(){
console.log("进入");
});
$(".inner").mouseleave(function(){
console.log("离开");
});
/* 关闭事件 */
$(".inner").off();
/* 绑定 可以绑定多个事件 */
$(".out1").bind("mouseenter",function(){
console.log("进入");
});
/* 事件冒泡 */
$("#btn").click(function(event){
console.log("按钮点击");
event.stopPropagation();//阻止冒泡
});
$(".divbtn").click(function(){
console.log("div点击");
});
/* one 只能执行一次的函数 */
$(".out2").one("click",function(){
console.log("one事件");
});
});
</script>
</head>
<body>
<div class="out">
外部div
<div class="inner">
内部div
</div>
</div>
<div class="divbtn">
<button id="btn">我是按钮</button>
</div>
<div class="out1">
外部div1
<div class="inner1">
内部div1
</div>
</div>
<div class="out2">
外部div2
<div class="inner2">
内部div2
</div>
</div>
</body>
</html>