这里分别采用后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
函数解决。
引入函数:
for (var i = 0; i < 3; i++) {
$("input[type='button']").unbind("click");
$("input[type='button']").bind("click", function(){
alert("aaa");
});
}
alert("aaa");
仅执行一次。
bind()
方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数
unbind()
方法移除被选元素的事件处理程序。能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。
event
是事件类型,类型包括:blur、flcus、load、resize、scroll、unload、click、dblclikc、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup
和error
等,当然也可以是自定义名称。
data
为可选参数,作为event.data
属性值传递给事件对象的额外数据对象。
function
是用来绑定的处理函数。
语法:
$(selector).bind(event,data,function)
event
和 function
必须指出下面些段代码做说明:
例1:删除p
的所有事件
$("p").unbind();
例2:删除p
的click
事件
$("p").unbind("click");
例2:删除p
元素click
事件后出发的test
函数 和 添加p
元素click
事件后触发的test
函数
$("p").unbind("click",test);
$("p").bind("click",test);
注意:要定义 .bind()
必须指明什么事件和函数
现在来看个简单的demo ,整个div
有一个点击收起展开的事件,如果想要点击链接但是不触发div
的点击事件,需要在触发链接的时候把div
的点击事件禁用,这里我用到链接mouseenter
事件是unbind
删除div
的事件。这里还不算完,这时候只要鼠标进入链接区域,div
的点击事件就删除了,我们还需要加入鼠标移出链接区域的时候恢复div
点击事件。代码如下:
$(function(){ var Func = function(){
$(".com2").toggle(200); }
$(".test").click(Func)
$(".test a").mouseenter(function(){
$(".test").unbind(); //删除.test的所有事件
});
$(".test a").mouseleave(function(){
$(".test").bind("click",Func); //添加click事件
});
});
event
是事件类型
…
function
是用来绑定的处理函数。