JQuery的click、bind、delegate、off、unbind

.click与.bind

　　.click和.bind都是给每个元素绑定事件,对于只绑定一个click事件，.bind事件的简写就是.click那种方式。

　　这两种方式都会出现两个问题：

　　第一个问题，如果要绑定的事件特别多，比如要绑定100个元素，要绑定100次，对于大量元素来说，影响到了性能。但是如果是id选择器，因为id唯一，用bind()方法就很快捷了。
　　第二个问题，对于尚未存在的元素，无法绑定。动态添加一个span元素，点击这个span元素，会发现没有动作响应。

　　那么你就会问，为什么要出现.bind()这个事件呢？

　　.bind()可以一次添加多个事件。

　　你给一个元素一次性添加了好多事件，.unbind()事件解绑，可以有选择性的解绑。

　　比如说，一个按钮，你点击后他要提交到后台等返回结果是，你不希望它能够再次被点击，但是它的其他效果还有，你就需要解绑。

　　还可以给绑定的事件起名字.bind("mouseover.plugin" function(){})

　　解绑的时候 unbind(".plugin");

　　unbind("mouseover!")加！的是匹配所有不含命名空间的mouseover事件

.click和.bind 与.delegate

　　这个效果和普通绑定事件和on委托事件效果一样.

　　这种方式采用了事件委托的概念。不是直接为btn3元素绑定事件，而是为其父元素（或祖先元素也可）绑定事件，当在父元素内任意元素上点击时，事件会一层层从event target向上冒泡，直至到达你为其绑定事件的元素。冒泡的过程中，如果事件的currentTarget与选择器匹配时，就会执行代码。

　　这样就解决了用。click(),bind()方法的上面两个问题，不用再一个个地去为btn元素绑定事件，也可以为动态添加进来的btn元素绑定。甚至，如果你将事件绑定到document上，都不用等document准备好就可执行绑定。

　　这样，绑定是容易了，但是调用的时候也可能出现问题。如果事件目标在DOM树中很深的位置，这样一层层冒泡上来查找与选择器匹配的元素，又影响到性能了。

　　.bind 与.delegate都可以同时绑定多个事件。

.delegat与.on

　　这两个函数实现的效果是一样的，以前没有开放on，只有bind,click,live,delagate，他们都是通过on实现的，后面把live删了，把on直接开放出来用。但是为什么不把.delegate也删掉，就不知道了，知道的可以告诉我。

.delegate和.on还是有一些细微的区别的：

　　参数的位置不太一样。

对于他们的解绑/解除委托

　　click和bind用unbind解绑，delegate和on的都是相应的解除委托，假如你要直接解绑一个元素的一个事件，那么你就用id选择器好了~，对一个单独元素这样解除委托不可以哦！

　　这样用类解除委托

总结：

　　①选择器匹配到较多元素时，不用click和bind，用delegate和on，增加效率并且可动态添加元素。注意dom树不要太深，父元素选择得当。Jq版本要高

　　②选择器匹配的元素少时，可以用click和bind。 Jq低版本支持

综上所述呢，目前用on就对了。

JQuery的click、bind、delegate、off、unbind相关推荐

[jQuery] 谈一下Jquery中的bind(),live(),delegate(),on()的区别？
[jQuery] 谈一下Jquery中的bind(),live(),delegate(),on()的区别? 在我们深入了解这些方法之前,我们先来一段常见的的HTML,作为我们编写jquery示例方法使 ...
click() bind() live() delegate()区别
click(),bind(),live()都是执行事件时使用的方法,他们之前是有一些区别的,我们在使用这些方法时应该根据需要进行选择. 1.click()方法是我们经常使用的单击事件方法: <s ...
click() bind() live() delegate()区别 1
click(),bind(),live()都是执行事件时使用的方法 1.click()单击事件方法: $("a").click(function() {alert("he ...
java弹窗点击事件_[Java教程]jQuery的click事件在当前页弹出层窗口（不打开新页面）...
[Java教程]jQuery的click事件在当前页弹出层窗口(不打开新页面) 0 2015-10-24 15:00:04 当给链接添加一个click事件,我们可能不希望Web浏览器按照其常规模式退出 ...
jQuery 解决 click 和 dblclick 冲突
版权声明:本文首发 http://asing1elife.com ,转载请注明出处. https://blog.csdn.net/asing1elife/article/details/8265564 ...
浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
前言因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能 ...
jQuery中的.bind()、.live()和.delegate()之间区别分析
DOM树首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何 ...
浅谈Jquery中的bind()、live()、delegate()、on()绑定事件方式
一.on(),live(),bind() on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建 ...
【转】jQuery中的bind(),live(),delegate(),on()事件绑定方式的区别
bind() ...

JQuery的click、bind、delegate、off、unbind

JQuery的click、bind、delegate、off、unbind相关推荐

最新文章

热门文章