13、jQuery事件处理之事件绑定使用示例
本帖最后由 Sian 于 2016-2-21 11:50 编辑<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
html,body{
text-align: center;
font-size: 20px;
}
div{
margin: 0 auto;
border: 1px solid black;
}
#cn{
float: left;
margin: 50px;
width: 420px;
height: 340px;
line-height: 40px;
}
#bj{
width: 340px;
height: 260px;
}
#hd{
width: 260px;
height: 180px;
}
#ppc{
width: 180px;
height: 75px;
}
#usa{
float: left;
margin: 50px;
width: 420px;
height: 340px;
}
</style>
<script>
$(document).ready(function(){
/*
// 事件处理函数绑定（给id为ppc的对象click事件绑定一个匿名函数）
$('#ppc').click(function(){
alert("#####");
});
// 使用bind方法同样可以实现上述功能,bind方法为绑定功能
$('#ppc').bind('click', function(){
alert("AAAAA");
})
// 同时绑定两个事件方法
$('#ppc').mouseover(function(){
alert("MMMMM");
}).mouseover(function(){
$(this).css('background', 'red');
});
// 使用bind同样可以实现多个事件方法绑定
$('#ppc').bind('mouseover', function(){}).bind('mouseover', function(){});
// 为事件绑定只执行一次的处理函数one()
$('#ppc').one('click', function(){
alert("one");
});
// unbind参数为空则删除所有事件处理方法
$('#ppc').click(function(){
alert("####");
$(this).unbind();
});
// 绑定多个事件
$('#ppc').bind('mouseover', function(){
$(this).css('background', 'red');
}).bind('mouseup', function(){
$(this).css('background', 'blue');
}).bind('mousedown', function(){
$(this).css('background', 'green');
});
// 删除指定的某些事件
$('#ppc').unbind('mouseover mousedown');
// 通过命名空间删除一个事件处理函数,事件名后加命名空间
$('#ppc').bind('click.one', function(){
alert("AAAAAA");
}).bind('click.two', function(){
$(this).css('background', 'red');
});
// 在jQuery1.7后使用on() off()代替bind() unbind()
$('#ppc').unbind('click.two');
$('#ppc').on('mouseover', function(){
$(this).css('background', 'red');
}).on('mouseover', function(){
alert("####");
});
*/
});
</script>
</head>
<body>
<div id="cn">
<span>中国</span>
<div id="bj">
<span>北京</span>
<div id="hd">
<span>海淀</span>
<div id="ppc">
<span><a href="http://www.baidu.com">www.ppc.com</a></span>
</div>
</div>
</div>
</div>
<div id="usa">
<span>美国</span>
</div>
</body>
</html>
页:
[1]