<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function () {
//1.简单绑定$('').bind('事件','函数（可以是有名函数，也可以是匿名函数）')
/*$('div').bind('mouseover',function () {
$(this).css('background-color','lightblue');
});
$('div').bind('mouseout',function () {
$(this).css('background-color','lightcoral');
});*/
//2.为同一个对象的“多个不同类型事件”绑定同一个处理
/*$('div').bind('click mouseover mouseout',function () {
alert(123);
});*/
//3.通过一个json对象为节点同时绑定多个事件
/*$('div').bind({
click:function () {
alert(123);
},
mouseover:function () {
alert(123);
},
mouseout:function () {
alert(123);
}
});*/
//4.通过有名函数绑定事件
/*function f1 () {
alert(123);
}
function f2 () {
alert(123);
}
$('div').bind('click',f1);
$('div').bind('click',f2);
});*/
//5.取消绑定事假
/*function cancel () {
$('div').unbind();//取消全部事件
$('div').unbind('click');//取消指定类型
$('div').unbind('click',f2);//取消有名函数
}*/
</script>
<style type="text/css">
div{width: 300px;height: 200px;background-color: lightgoldenrodyellow;font-size: 30px;}
</style>
</head>
<body>
<div>we are family</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function () {
//1.简单绑定$('').bind('事件','函数（可以是有名函数，也可以是匿名函数）')
/*$('div').bind('mouseover',function () {
$(this).css('background-color','lightblue');
});
$('div').bind('mouseout',function () {
$(this).css('background-color','lightcoral');
});*/
//2.为同一个对象的“多个不同类型事件”绑定同一个处理
/*$('div').bind('click mouseover mouseout',function () {
alert(123);
});*/
//3.通过一个json对象为节点同时绑定多个事件
/*$('div').bind({
click:function () {
alert(123);
},
mouseover:function () {
alert(123);
},
mouseout:function () {
alert(123);
}
});*/
//4.通过有名函数绑定事件
/*function f1 () {
alert(123);
}
function f2 () {
alert(123);
}
$('div').bind('click',f1);
$('div').bind('click',f2);
});*/
//5.取消绑定事假
/*function cancel () {
$('div').unbind();//取消全部事件
$('div').unbind('click');//取消指定类型
$('div').unbind('click',f2);//取消有名函数
}*/
</script>
<style type="text/css">
div{width: 300px;height: 200px;background-color: lightgoldenrodyellow;font-size: 30px;}
</style>
</head>
<body>
<div>we are family</div>
</body>
</html>