jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
114 浏览量
2020-10-22
23:10:09
上传
评论
收藏 57KB PDF 举报
jQuery绑定事件监听绑定事件监听bind和移除事件监听和移除事件监听unbind用法实例详用法实例详
解解
主要介绍了jQuery绑定事件监听bind和移除事件监听unbind用法,结合实例形式详细分析了绑定事件监听bind和
移除事件监听unbind的具体使用技巧与相关注意事项,需要的朋友可以参考下
本文实例讲述了jQuery绑定事件监听bind和移除事件监听unbind用法。分享给大家供大家参考，具体如下：
这里分别采用后bind(eventType,[data],Listener)//data为可选参数,one()该方法绑定的事件触发一次后自动删
除，unbind(eventType,Listener),
实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>unbind(eventType,listener)</title>
<style type="text/css">
<!--
img{
border:1px solid #000000;
}
input{
border:1px solid #570000;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
var fnMyFunc1; //函数变量
$("img")
.bind("click",fnMyFunc1 = function(){ //赋给函数变量
$("#show").append("<div>点击事件1</div>");
})
.bind("click",function(){
$("#show").append("<div>点击事件2</div>");
})
.bind("click",function(){
$("#show").append("<div>点击事件3</div>");
});
$("input[type=button]").click(function(){
$("img").unbind("click",fnMyFunc1); //移除事件监听myFunc1
});
});
</script>
</head>
<body>
<img src="11.jpg"> <input type="button" value="移除事件1">
<div id="show"></div>
</body>
</html>
再来看这段测试代码：
<body>
<input type="button" name="aaa" value="点击我">
<input type="checkbox" name="checkbox1">
</body>
JQuery代码：
$().ready(function(){
for (var i = 0; i < 3; i++) {
$("input[type='button']").click(function(){
alert("aaaa");
});
}
}
alert("aaaa")会执行三次，在事件嵌套事件中，不希望看到这样的情况，需要把上层事件禁用，此时可引入bind和unbind函数
解决。
资源评论
