资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

jquerybind,jquery bind on

jquery中的bind,live,delegate和on方法的区别是什么

$(selector).bind(event,data,function)

公司主营业务:成都做网站、网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出玛纳斯免费做网站回馈大家。

$(selector).live(event,data,function)//jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替$(selector).delegate(childSelector,event,data,function)//jquery1.4.2及其以上版本;$(selector).on(event,childselector,data,function)//jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;

event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;

单事件处理:例如 $(selector).bind("click",data,function);

多事件处理:1.利用空格分隔多事件,例如 $(selector).bind("click dbclick mouseout",data,function);

2.利用大括号灵活定义多事件,例如 $(selector).bind({event1:function, event2:function, ...}) 

3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;

大括号替代方式:绑定较为灵活,可以给事件单独绑定函数; 

data:可选;需要传递的参数;

function:必需;当绑定事件发生时,需要执行的函数;适用所有版本,但是根据官网解释,自从jquery1.7版本以后bind()函数推荐用on()来代替。

jQuery中的bind()函数跟on()函数有什么区别呢?

.bind()与.on()的区别:

(1)是否支持selector这个参数值。由于javascript的事件冒泡特性,如果在父元素上注册了一个事件处理函数,当子元素上发生这个事件的时候,父元素上的事件处理函数也会被触发。

如果使用on的时候,不设置selector,那么on与bind就没有区别了。

(2)on绑定的事件处理函数,对于未来新增的元素一样可以的,和delegate效果相同,而bind则不行。 

(3) delegate用法与on()相同,只是参数的顺序不同:

扩展资料:

.bind()与.on()的实际应用:

1.bind()是直接绑定在元素上 ,将一本地地址与一套接口捆绑。如无错误发生,则bind()返回0。否则的话,将返回-1,应用程序可通过WSAGetLastError()获取相应错误代码。

用于事件处理程序

function ClassName(){

this.eventHandler = (function(){

}).bind(this);

}

2.on()则实现事件代理, 可以在匹配元素上绑定一个或者多个事件处理函数。

(1) 用来绑定多事件,并且为同一函数,如:

$('div').on('click mouseover',function(){

//do sth

});

(2)多个事件绑定不同函数,如:

$('div').on({

'click':function(){

//do sth

},

'mouseover':function(){

//do sth

}

});

(3)事件代理,如:

html:

button id="bt1"按钮1/button

jq:

$('#bt1').on('click',function(){

$('body').append('button按钮2/button');

});

$('body').on('click','.bt2',function(){

console.log('这是bt2');

}

参考资料:百度百科-bind()

jQuery中bind()方法中的参数

bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。其语法为:

$(selector).bind(event,data,function)

参数说明如下:

event:规定添加到元素的一个或多个事件。必需。

data:  规定传递到函数的额外数据。可选。

function: 规定当事件发生时运行的函数。必需。

示例如下:

// 当点击鼠标时,隐藏或显示 p 元素:

$("button").bind("click",function(){

$("p").slideToggle();

});

请问下jquery的bind的用处

没啥区别,个人感觉是喜好写法问题,我刚测试了一下,没感觉有啥区别

D1:

$("#btn").bind("click",function(){

alert("test1");

});

$("#btn").bind("click",function(){

alert("test2");

});

D2:

$("#btn").click(function(){

alert("test1");

});

$("#btn").click(function(){

alert("test2");

});

这两个执行效果一样,都会依次弹出来两个对话框

我刚才又研究了一个jquery的源码,诸如click(),dblclick(),mousemove()这样的简单写法的事件绑定的都是调用的this.on(

name,

null,

data,

fn

)

这个方法进行事件绑定的,而bind()也同样是调用的这个

bind:

function(

types,

data,

fn

)

{

return

this.on(

types,

null,

data,

fn

);

},

所以说

click()只是简化写法,而且jquery的文档里也有关于这样的说明

----------------------------

以下的引用jquery文档的说明

-----------------------------------------

.bind()

方法是用于往文档上附加行为的主要方式。所有JavaScript事件对象,比如focus,

mouseover,

resize,都是可以作为type参数传递进来的。

jQuery还提供了一些绑定这些标准事件类型的简单方式,比如.click()用于简化.bind('click')。一共有以下这些:blur,

focus,

focusin,

focusout,

load,

resize,

scroll,

unload,

click,

dblclick,

mousedown,

mouseup,

mousemove,

mouseover,

mouseout,

mouseenter,

mouseleave,

change,

select,

submit,

keydown,

keypress,

keyup,

error

jQuery中bind函数用法

问题1:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

titleSimple JQuery/title

script type="text/javascript" src="js/jquery.js"/script

script type="text/javascript"

$(function(){

$('#mybtn').bind('click', {a : 'hello', b : 'world'}, myFun);

});

function myFun(e) {

alert(e.data.a);

alert(e.data.b)

}

/script

/head

body

input type="button" id="mybtn" value="Click me." /

/body

/html

如上面例子,可以传递多个参数。

-------------------------------------------------------

问题2:

$('pTest/p').appendTo('.inner');

$('.inner').append('pTest/p');

上面这个是append()和appendTo()区别,应该一目了然了吧?

而appendChild()不是jquery的方法,而是javascript原生的方法。

append和appendChild的关系是:

其实几乎一样,append就是调用appendChild实现的,只是在append前,做一个简单判断。下面贴下jquery的源代码:

append: function() {

return this.domManip(arguments, true, function( elem ) {

if ( this.nodeType === 1 ) {

this.appendChild( elem );

}

});

}

--------------------------------------------------

问题3:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

titleSimple JQuery/title

script type="text/javascript" src="js/jquery.js"/script

script type="text/javascript"

$(function(){

$('#mybtn').bind('click', myFun);

});

function myFun() {

alert($(this).attr('value'));

}

/script

/head

body

input type="button" id="mybtn" value="Click me." /

/body

/html

第3个问题不是看的很明白?直接调用应该可以呀,看看这个例子是不是你想要的?

---------------------------------------------------

问题4:网上有很多,查看参考链接这个吧。


文章题目:jquerybind,jquery bind on
网站URL:http://cdkjz.cn/article/dsdcchi.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220