当前位置: 澳门新濠3559 > 服务器运维 > 正文

// 为div中的所有p元素绑定click事件处理程序,在

时间:2019-12-08 19:30来源:服务器运维
for (var i = 0; i 3; i++) {$("input[type='button']").unbind;$("input[type='button']").bind{alert;} 您可能感兴趣的文章: JQuery中绑定事件(bind())和移除事件(unbind()) jQuery中unbind()方法用法实例 jQuery用unbi
for (var i = 0; i < 3; i++) {$("input[type='button']").unbind;$("input[type='button']").bind{alert;}

您可能感兴趣的文章:

  • JQuery中绑定事件(bind())和移除事件(unbind())
  • jQuery中unbind()方法用法实例
  • jQuery用unbind方法去掉hover事件及其他方法介绍
  • JQuery入门——移除绑定事件unbind方法概述及应用
  • jQuery unbind()方法实例详解

本文实例讲述了jQuery绑定事件监听bind和移除事件监听unbind用法。分享给...

测试:页面代码:<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;});}}alert会执行三次,在事件嵌套事件中,不希望看到这样的情况,需要把上层事件禁用,此时可引入bind和unbind函数解决。引入函数:for (var i = 0; i < 3; i++) {$("input[type='button']").unbind;$("input[type='button']").bind("click", function(){alert;}alert;仅执行一次。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 是用来绑定的处理函数。语法:$.bind(event,data,function) // event 和 function 必须指出下面些段代码做说明:例1:删除p的所有事件$.unbind();例2:删除p的click事件$.unbind;例2:删除p元素click事件后出发的test函数 和 添加p元素click事件后触发的test函数$.unbind("click",test);$.bind("click",test);注意:要定义 .bind() 必须指明什么事件和函数现在来看个简单的demo ,整个div有一个点击收起展开的事件,如果想要点击链接但是不触发div的点击事件,需要在触发链接的时候把div的点击事件禁用,这里我用到链接mouseenter事件是unbind删除div的事件。这里还不算完,这时候只要鼠标进入链接区域,div的点击事件就删除了,我们还需要加入鼠标移出链接区域的时候恢复div点击事件。代码如下:12345678910$(function(){ var Func = function(){ $.toggle; } $.click $(".test a").mouseenter(function(){ $.unbind(); //删除.test的所有事件 }); $(".test a").mouseleave(function(){ $.bind("click",Func); //添加click事件 }); });event 是事件类型…function 是用来绑定的处理函数。部分内容来自

方法名

说明

语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器)

Bind(

为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。没用on关键字

jQueryObject.bind( events [, data ], handler )

One

为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。只绑定一次

jQueryObject.one( events [, data ], handler )

jQueryObject.one( events , selector [, data ], handler )

Unbind

bind()的反向操作,从每一个匹配的元素中删除绑定的事件。

jQueryObject.unbind( [ events [, handler ]] )

jQueryObject.unbind( eventObject )

Trigger

可以使用trigger()方法来模拟操作。

jQueryObject.trigger( events [, data] )

jQueryObject.trigger( eventObject [, data] )

Triggerhandler

和trigger()方法类似,但只是触发第一个元素的事件

jQueryObject.triggerHandler( events [, extraArguments ] )

On

为指定元素的一个或多个事件绑定事件处理函数。

jQueryObject.on( events [, selector ] [, data ], handler )

 

jQueryObject.on( eventObject [, selector ] [, data ] )

Off

用于解除由on()函数绑定的事件处理函数。

jQueryObject.off( [ events [, selector ] [, handler ] ] )

jQueryObject.off( eventObject [, selector ] )

现在来看个简单的demo,整个div有一个点击收起展开的事件,如果想要点击链接但是不触发div的点击事件,需要在触发链接的时候把div的点击事件禁用,这里我用到链接mouseenter事件是unbind删除div的事件。这里还不算完,这时候只要鼠标进入链接区域,div的点击事件就删除了,我们还需要加入鼠标移出链接区域的时候恢复div点击事件。代码如下:

jQuery绑定事件监听bind和移除事件监听unbind用法实例详解,jqueryunbind

本文实例讲述了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函数解决。

引入函数:

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 是用来绑定的处理函数。

更多关于jQuery事件相关内容感兴趣的读者可查看本站专题:《jQuery常见事件用法与技巧总结》

希望本文所述对大家jQuery程序设计有所帮助。

"mouseleave": function(event){
$(this).html( "Bye!");
}
};
$("#n5").one( eventsMap );//为n5绑定mouseenter mouseleave两个事件 (one和bind绑定方法可以不加上data,但是on和live要加上)
5.trigger()函数用于在每个匹配元素上触发指定类型的事件。
var $log = $("#log");
function handler( event, arg1, arg2 ){
var html = '<br>触发元素#' + this.id + '的[' + event.type +']事件,额外的函数参数为:' + arg1 + ', ' + arg2;
$log.append( html );
}
var $buttons = $(":button");
// 为所有button元素的click事件绑定事件处理函数
$buttons.bind( "click", handler );
// 为所有a元素的click、mouseover、mouseleave事件绑定事件处理函数
$("a").bind( "click mouseover mouseleave", handler );
// 触发所有button的click事件
$buttons.trigger("click");
/*(追加文本)
触发元素#btn1的[click]事件,额外的函数参数为:undefined, undefined
触发元素#btn2的[click]事件,额外的函数参数为:undefined, undefined
*/
$("#btn1").trigger("click", "CodePlayer");
/*(追加文本)
触发元素#btn1的[click]事件,额外的函数参数为:CodePlayer, undefined
*/
// arg1 = "张三", arg2 = 20
$("a").trigger("mouseover", ["张三", 20 ] );
/*(追加文本)
触发元素#a1的[mouseover]事件,额外的函数参数为:张三, 20
*/
$("a").trigger("mouseleave", { name: "张三", age: 18 } );
/*(追加文本)
触发元素#a1的[mouseleave]事件,额外的函数参数为:[object Object], undefined
*/
6.triggerHandler()函数用于在每个匹配元素上触发指定类型的事件。作用于trigger()函数相似,但triggerHandler()函数具有以下例外情况:不会触发执行元素的默认行为(例如链接click事件默认的跳转行为,表单submit事件默认的提交行为),触发事件只针对jQuery对象中的第一个匹配元素,触发的事件不会在DOM树中冒泡,返回值是对应事件处理函数的返回值,而不是当前jQuery对象本身。
7.unbind()函数用于移除匹配元素上绑定的一个或多个事件的事件处理函数。主要用于解除由bind()函数绑定的事件处理函数。
$("#btn").unbind("click");//移除按钮的bind绑定的点击事件
$(":button").unbind();//移除所有按钮的事件

event 和 function 必须指出下面些段代码做说明:

3.bind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数。
为<div>中的所有<p>元素绑定点击事件:
//为div中的所有p元素的click事件绑定事件处理函数只有n2、n3可以触发该事件
$("div p").bind("click", function(){
alert( $(this).text() );
});
// 新添加的n6不会触发上述click事件(与on不一样)
$("#n1").append('<p id="n6">上述绑定的click事件不会对该元素也生效!</p>');
还可以同时绑定多个事件,并为事件处理函数传递一些附加的数据,我们可以通过jQuery为事件处理函数传入的参数event(Event事件对象)来进行处理:
var data={id:1,name:"qin"};
$("#n5").bind("mouseenter mouseleave",data,function(envent){
var $me=$(this);
if(envent.type=="mouseenter"){
$me.html("<b>hello "+data.name+"</b>" );
}else if(envent.type=="mouseleave"){
$me.html(" bye ");
}
});
同理:
var eventsMap = {
"mouseenter": function(event){
$(this).html( "Hello!"+data.name);
},

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是用来绑定的处理函数。

1. on()和off()从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定。jQuery推出on()的目的有2个,一是为了统一接口,二是为了提高性能,所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了,因为它已经处于不推荐使用列表了,随时会被干掉。如果只绑定一次事件,那接着用one()吧,这个没有变化。推荐使用on() off().
// 为div中的所有p元素绑定click事件处理程序,只有n2、n3可以触发该事件:
$("div").on("click", "p", function(){
alert( $(this).text() );// 这里的this指向触发点击事件的p元素(Element)
});
即使符合条件的元素是on()函数执行后新添加,绑定事件对其依然有效:
$("div").append("<p id='n6'>新添加的元素</p>");
为div中的n2绑定mouseenter mouseleave两个事件,并为其传入附加数据data:
var data={ id:5,name:"zhangjie" };//参数
$("div").on("mouseenter mouseleave","#n2",data,function(envent){
var options=envent.data; //传入的参数
if(envent.type=="mouseenter"){
alert("hello "+options.name);
}
else if(envent.type=="mouseleave"){
alert("bye");
}
});
或者:
var envents={
"mouseenter" : function(envent){
alert("hello " +envent.data.name);
},
"mouseleave" :function(envent){
alert("bye");
}
};
$("div").on(envents,"#n2",data);

alert;仅执行一次。

2.off() 方法移除用.on()绑定的事件处理程序。
例子:
function btnClick1(){
alert(this.value+"-1");
}
function btnClick2(){
alert(this.value+"-2");
}
var $body=$("body");
$body.on("click","input:first",btnClick1);//按钮1绑定点击事件1
$body.on("click","input:last",btnClick2);//按钮2绑定点击事件2
//为所有a元素绑定click、mouseover、mouseleave事件
$body.on("click mouseenter moseleave","a",function(envent){
if(envent.type=="click"){
alert("点击事件");
}
else if(envent.type=="mouseenter"){
$(this).css("color","red");
}
else{
$(this).css("color","blue");
}
});
//$body.off("click","input:first",btnClick1); //移除按钮1绑定的点击事件
//$body.off("click"); 移除所有绑定的点击事件
//$body.off(); 移除所有事件
//$body.off("click","a"); //移除a的点击事件
$body.off("","a"); //移除a的所有事件

unbind<!--img{ border:1px solid #000000;}input{ border:1px solid #570000;}-->${ var fnMyFunc1; //&#20989;&#25968;&#21464;&#37327; $ .bind("click",fnMyFunc1 = function(){ //&#36171;&#32473;&#20989;&#25968;&#21464;&#37327; $.append; }) .bind{ $.append; }) .bind{ $.append; }); $.click.unbind; //&#31227;&#38500;&#20107;&#20214;&#30417;&#21548;myFunc1 });});   

${for (var i = 0; i < 3; i++) {$("input[type='button']").click{alert;}}

"mouseleave": function(event){
$(this).html( "Bye!");
}
};
$("#n5").bind(eventsMap);//为n5绑定mouseenter mouseleave两个事件(bind绑定方法可以不加上data,但是on要加上)
4.one()函数用于为每个匹配元素的一个或多个事件绑定一次性事件处理函数。
// 只有第一次点击时,执行该事件处理函数
$("#btn").one("click",function(){
alert("只弹出一次");
});
// 在每个div元素上为其后代p元素的click事件绑定事件处理函数
// 只有n2、n3、n6、n7可以触发该事件
// n2和n3两者总共只能触发一次,n6和n7两者总共只能触发一次
$("div").one("click","p",function(){
alert($(this).text());
});
$("#n1").append('<p id="n9">上述绑定的一次性click事件也会对该元素也生效!</p>'); //与bind不一样
还可以同时绑定多个事件,并为事件处理函数传递一些附加的数据:
var data={id:1,name:"eric"};
$("#n4").one("mouseenter mouseleave", data, function(event){
var obj = event.data;
var $me = $(this);
if(event.type == "mouseenter"){
$me.html("<b>hello "+obj.name+" </b>" );
}else{
$me.html( 'bye!' );
}
});
同理:
var eventsMap = {
"mouseenter": function(event){
$(this).html( "Hello!"+obj.name);
},

本文实例讲述了jQuery绑定事件监听bind和移除事件监听unbind用法。分享给大家供大家参考,具体如下:

<body>
<div id="n1">
<p id="n2"><span>CodePlayer</span></p>
<p id="n3"><span>qinqin</span></p>
<em id="n4">;
</div>
<p>id="n5">Google</p>
<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>
<input id="btn" type="button" value="点击绑定一次" />
<div id="n2">
<p id="n6"><span>CodePlayer</span></p>
<p id="n7"><span>qinqin</span></p>
</div>
<div id="log"><div>
</body>

alert会执行三次,在事件嵌套事件中,不希望看到这样的情况,需要把上层事件禁用,此时可引入bind和unbind函数解决。

 

event 是事件类型…function 是用来绑定的处理函数。

更多关于jQuery事件相关内容感兴趣的读者可查看本站专题:《jQuery常见事件用法与技巧总结》

这里分别采用后bind(eventType,[data],Listener)//data为可选参数,one()该方法绑定的事件触发一次后自动删除,unbind,

$.unbind.bind;

例1:删除p的所有事件复制代码 代码如下:$;例2:删除p的click事件复制代码 代码如下:$;例2:删除p元素click事件后出发的test函数 和 添加p元素click事件后触发的test函数

注意:要定义 .bind() 必须指明什么事件和函数

语法:

希望本文所述对大家jQuery程序设计有所帮助。

${ var Func = function.toggle.click.mouseenter{ $; //删除.test的所有事件 }); $.mouseleave{ $.bind; //添加click事件 });});

bind()方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数unbind()方法移除被选元素的事件处理程序。能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。

编辑:服务器运维 本文来源:// 为div中的所有p元素绑定click事件处理程序,在

关键词: