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

JavaScript014

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

.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()

bind是用来绑定一个或多个事件的,live其实bind的一个加强版,用来绑定通过JavaScript或者jQuery添加的DOM元素事件,其语法结构是一样

123456$("p").bind("mouseenter mouseleave",function(){alert("ok")})$("p").live("mouseenter mouseleave",function(){alert("ok")})

delegate用于事件委托,也是绑定过JavaScript或者jQuery添加的DOM元素事件。

123$("div").delegate("p","click",function(){alert("p")})

点击div下面的P执行alert

而on是在1.7之后新增的,是把bind,live,delegate全部合并在一起了,

123$("div").on("click","p",function(){alert(1) })

不需要事件委托的时候把P去掉就会变成点击div触发了。

个人建议根据版本来使用,语法其实都差不多,如果你是用1.7版本以上就建议用on,毕竟bind,live,delegate这些将来都会遗弃了,如有错误,请指出。顺便吐槽一下楼上的回答,不走心啊

查阅资料,发现并未出现有 septo.js 的文件,故猜测,这里应该是提问者手误将 zepto.js 打成了 septo.js 因此这里针对 zepto.js 中的 on 方法进行说明:

实例:

向 <p>元素添加 click 事件处理程序:

$("p").on("click",function(){

alert("The paragraph was clicked.")

})

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。

注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

提示:如需移除事件处理程序,请使用 off() 方法。

提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。