事件的用途
我们在编写代码时有时候需要对某一元素进行多种操作，此时我们可以用到on()方法来解决这个问题，如果需要解除相关的委托事件我们也可以利用off()方法来进行解除。此外还有一个one()方法用于对某一元素只进行一次操作。
on()方法
定义: on() 方法在被选元素及子元素上添加一个或多个事件处理程序
语法： $(selector).on(event,childSelector,data,function(){});
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#one{
width: 400px;
height: 400px;
background-color: aqua;
}
</style>
<script src="js/jquery.js"></script> //这个代码是不需要我们自己写的可以到www.bootcdn.com上去下载
<script>
$(function(){ //on()方法绑定单个事件方法
$("#one").on("click",function(){
$("#one").css("background-color","red");
alert("你的on方法绑定的是click单机事件");
});
});
</script>
</head>
<body>
<div id="one">点我试试看</div>
</body>
</html>
运行效果：
绑定多个事件案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#one{
width: 400px;
height: 400px;
background-color: aqua;
}
</style>
<script src="js/jquery.js"></script>
<script>
$(function(){
$('#two').on({
'click' : function(){ alert("on绑定单击事件成功！");},
'mouseover' : function(){ $("#one").css("background-color","yellow");
}
});
});
</script>
</head>
<body>
<input type="button" value="点击" id="two"/>
<br />
<div id="one">点我试试看</div>
</body>
</html>
运行效果：
off（）方法
作用： off() 方法通常用于移除通过 on() 方法添加的事件处理程序。
语法：
$(selector).off(event,selector,function(eventObj),map)
one()方法
作用： one() 方法为被选元素添加一个或多个事件处理程序，并规定当事件发生时运行的函数。
当使用 one() 方法时，每个元素只能运行一次事件处理程序函数。
语法：
$(selector).one(event,data,function)
实例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件编写</title>
<style type="text/css">
*{padding: 0; margin: 0;}
input {margin: 3px;}
div{ width:300px; height:300px; border:5px solid #AAAAAA; color:greenyellow;
padding: 10px; margin: 20px ; float: left;}
.bg { background: #AAAAAA; font-size: 30px;}
</style>
<!-- 引入jQuery -->
<script src="js/jquery.js"></script>
<script>
$(function(){
//on绑定事件语法二
$('#btn4').on('click mouseout',function(){
alert("on绑定事件成功！");
});
//on绑定事件语法三
$('#btn5').on({
'click' : function(){ alert("on绑定单击事件成功！");},
'mouseover' : function(){ alert("on绑定移入事件成功！");}
});
//on绑定事件的事件委托功能
$('body').on("mouseover","div",function(){
$(this).css("background","#CC6600");
});
$('#btn6').click(function(){
var $div=$('<div></div>');
$('body').append($div);
});
//解除绑定语法一
$('#btn7').click(function(){
//解除'#btn4'按钮所有事件
//$('#btn4').off();
//解除'#btn4'按钮的单击事件
$('#btn4').off("click");
});
//一次性事件绑定
$('#btn10').one("click",function(){
alert("仅触发一次单击事件！");
});
});
</script>
</head>
<body>
<h3>事件编写</h3>
<input type="button" value="on()绑定事件1" id="btn3"/>
<input type="button" value="on()绑定事件2" id="btn4"/>
<input type="button" value="on()绑定事件3" id="btn5"/>
<input type="button" value="on()的事件委托功能" id="btn6"/>
<input type="button" value="off()解除事件绑定1" id="btn7"/>
<input type="button" value="off()解除事件绑定2" id="btn8"/>
<input type="button" value="一次性事件" id="btn10"/>
<br /><br />
<!-- 测试的元素 -->
<div></div>
</body>
</html>
运行效果：
以上就是今天的全部内容，如有侵权请联系博主。
欢迎大家发表意见。
974
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
