这里分别采用后bind(eventType,[data],Listener)//data为可选参数
,one()
该方法绑定的事件触发一次后自动删除,unbind(eventType,Listener)
,
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/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
是用来绑定的处理函数。