demo.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.js"></script>
<script>
//这种绑定事件的方法是不会覆盖的。 //该绑定方式可以通过所有的解绑方式解绑。
// $(document).click(function () {
// alert(1);
// });
// $(document).click(function () {
// alert(2); //不会覆盖前面的事件
// });
//事件解绑 $(document).unbind("click"); 没参数表示解绑所有事件
//第二种绑定:bind 可以同时绑定多个事件
// $(document).bind("click mouseenter", function () {
// alert(1);
// })
// $(document).bind("click mouseenter", function () {
// alert(2); //不会覆盖前面的事件
// })
//解绑bind方式绑定的事件 $(document).unbind("click"); 没参数表示解绑所有事件
//第三种:delegate(委托) 可以通过父元素document为子元素.box绑定事件
// $(document).delegate(".box","click mouseenter", function () {
// alert(1);
// })
//解绑delegate方式绑定的事件
//$(document).undelegate(".box","mouseenter",fn) //解绑指定的函数,没有fn参数表示解绑所有的函数。
//第四种:on (重点) 可以传递参数(Json格式)
$(document).on("click mouseenter",".box",{"name":111}, function (event) {
alert(event.data.name); //通过事件event.data来获取数据。
});
//解绑on方式绑定的事件
//$(document).off("mouseenter",".box");
// $(function () {
// //直接为元素绑定事件,可以不通过父元素绑定。(常用)
// $(".box").on("click", function () {
// alert(5);
// })
// })
</script>
</head>
<body>
<div class="box" id="aa" style="width: 100px;height: 100px;background-color: pink;"></div>
</body>
</html>