为元素绑定事件的几个方法
点击按钮绑定点击事件，鼠标移入事件，鼠标移出事件
首先给一个按钮做点击事件，为盒子绑定鼠标点击事件和鼠标移入移出事件。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘按下换背景色</title>
<style>
button{
width:100px;
height:30px;
background:orange;
border:none;
}
div{
margin-top:10px;
width:300px;
height:200px;
background:black;
}
</style>
</head>
<body>
<button>绑定事件</button>
<div></div>
</body>
</html>效果图：
解析：给一个绑定事件的按钮，在没有点击这个按钮之前，下面的盒子不会有任何反应。再给一宽为300像素，高为200像素，背景颜色为黑色的盒子。
代码：
<script src="./jquery-1.12.2.js"></script>解析：用jQuery的方法来写代码，需要引入jQuery插件。引入之后就可以开始为元素绑定点击事件了。
第一种方法
代码：
<script>
$("button").click(function(){
$("div").click(function(){
$(this).css("backgroundColor","blue");
})
$("div").mouseenter(function(){
$(this).css("backgroundColor","yellow");
})
$("div").mouseleave(function(){
$(this).css("backgroundColor","pink");
})
})
</script>解析：这是最基础的方法，直接写需要绑定的事件和事件处理函数。当点击绑定事件的按钮之后，就会给盒子绑定鼠标单击盒子时背景颜色会变成蓝色，鼠标移入盒子时背景颜色会变成黄色，鼠标移出盒子时背景颜色变成粉色
第二种方法
代码：
<script>
$("button").click(function(){
$("div").click(function(){
$(this).css("backgroundColor","blue");
}).mouseenter(function(){
$(this).css("backgroundColor","yellow");
}).mouseleave(function(){
$(this).css("backgroundColor","pink");
})
})
</script>解析:这是一个普通链式方法，方法：.事件名字(事件处理函数).事件名字(事件处理函数).事件名字(事件处理函数)。
第三种方法
代码：
<script>
$("button").click(function(){
$("div").bind("click",function(){
$(this).css("backgroundColor","blue")
})
$("div").bind("mouseenter",function(){
$(this).css("backgroundColor","yellow")
)
$("div").bind("mouseleave",function(){
$(this).css("backgroundColor","pink")
})
})
</script>解析：这是bind方法，方法：bind(“事件名字”，事件处理函数)；
第四种方法
代码：
<script>
$("button").click(function(){
$("div").bind("click",function(){
$(this).css("backgroundColor","blue")
}).bind("mouseenter",function(){
$(this).css("backgroundColor","yellow")
}).bind("mouseleave",function(){
$(this).css("backgroundColor","pink")
})
})
</script>解析：这是bind链式方法，方法：.bind(“事件名字”，事件处理函数). bind(“事件名字”，事件处理函数). bind(“事件名字”，事件处理函数)
第五种方法
代码：
<script>
$("button").click(function(){
$("div").bind({"click":function(){
$(this).css("backgroundColor","blue");
},"mouseenter":function(){
$(this).css("backgroundColor","yellow");
},"mouseleave":function(){
$(this).css("backgroundColor","pink");
}})
})
</script>解析：这是键值对方法，方法.bind({“事件函数”：事件处理函数，“事件函数”：事件处理函数，“事件函数”：事件处理函数})
第六种方法
代码：
<script>
$("button").click(function(){
$("#dv1").delegate("#dv2","click",function(){
$(this).css("backgroundColor","blue");
})
$("#dv1").delegate("#dv2","mouseenter",function(){
$(this).css("backgroundColor","yellow");
})
$("#dv1").delegate("#dv2","mouseleave",function(){
$(this).css("backgroundColor","pink");
})
})
</script>解析：这个方法跟前面的几个方法有些不一样，这个是给父元素绑定事件，方法：父元素.delegate(“事件名字”，“子元素”，事件处理函数)。
第七种方法
代码：
<script>
$("button").click(function(){
$("#dv1").on("click","#dv2",function(){
$(this).css("backgroundColor","blue");
})
$("#dv1").on("mouseenter","#dv2",function(){
$(this).css("backgroundColor","yellow");
})
$("#dv1").on("mouseleave","#dv2",function(){
$(this).css("backgroundColor","pink");
})
})
</script>解析：这个方法跟delegate()方法差不多，就是子元素和事件名字对调了位置，方法：on(“子元素”，“事件名字”，事件处理函数)。
每个方法最后的效果图：
鼠标单击时
鼠标移入时
鼠标移出时
