.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的更多相关文章

  1. jQuery的.click,.bind,.unbind,.on,.off,.delegate,.undelegate

    .click与.bind .click和.bind都是给每个元素绑定事件,对于只绑定一个click事件,.bind事件的简写就是.click那种方式. 这两种方式都会出现两个问题: 第一个问题,如果要 ...

  2. jQuery方法区别:click() bind() live() delegate()区别

    今天看到一篇jquery 事件的文章,自己写了个小例子,虽然2种方式都可以实现,但是不太明白,找了点资料 $("#box1").delegate("p",&qu ...

  3. jQuery中的.bind()、.live()和.delegate()之间区别分析

    jQuery中的.bind()..live()和.delegate()之间区别分析,学习jquery的朋友可以参考下.   DOM树   首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的 ...

  4. jQuery中的bind() live() delegate()之间区别分析

    jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...

  5. click() bind() live() delegate()区别

    click(),bind(),live()都是执行事件时使用的方法 1.click()单击事件方法: $("a").click(function() { alert("h ...

  6. Jquery中的bind()方法的一点问题

    bind()方法绑定事件的时候,第二个参数是函数,如果代码都写在函数里面,没有任何问题.但是,直接调用外部封装的函数需要注意,出错的例子: <!doctype html> <html ...

  7. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

  8. Jquery中click事件重复执行的问题

    平常没注意事件绑定问题,在此注意一下: function testClick(obj){ $("select").off().on("click", funct ...

  9. jQuery方法区别(四)click() bind() live() delegate()区别

        click(),bind(),live()都是执行事件时使用的方法,他们之前是有一些区别的,我们在使用这些方法时应该根据需要进行选择. 1.click()方法是我们经常使用的单击事件方法: $ ...

随机推荐

  1. 在 Linux 中安装 Lighttpd Web 服务器

    Lighttpd 是一款开源 Web 服务器软件.Lighttpd 安全快速,符合行业标准,适配性强并且针对高配置环境进行了优化.相对于其它的 Web 服务器而言,Lighttpd 占用内存更少:因其 ...

  2. [SharePoint 2010]Sandboxed Solution (沙箱解決方案)

    現有的SharePoint 2007系統中,我們如果要安裝客製化的程式碼到系統中,我們必須製作一個解決方案包裝檔(Solution Package),然後在系統的中央管理後台中,真對整個伺服器農場Fa ...

  3. java手写的动态数组JimisunArray

    /** * @Author:jimisun * @Description: * @Date:Created in 22:10 2018-07-18 * @Modified By: */ public ...

  4. angular 2+ innerHTML属性中内联样式丢失

    通过属性绑定的innerHTML,把字符串里面的html解析 解析是没问题的,但一些内联样式会丢失掉 为了不丢掉样式,需要自定义一个管道来解决这个问题 html.pipe.ts import {Pip ...

  5. kibana5.6 源码分析以--环境搭建&技术准备

    Kibana是一个开源的分析与可视化平台,设计出来用于和Elasticsearch一起使用的.你可以用kibana搜索.查看.交互存放在Elasticsearch索引里的数据,使用各种不同的图表.表格 ...

  6. HDU3306—Another kind of Fibonacci

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3306 题目意思:一个斐波那契数列的变式,本来是A[n]=A[n-1]+A[n-2],现在变成A[n]= ...

  7. python基础-第五篇-5.3装饰器

    小白发呆的看着窗外,同事们陆陆续续的地来到公司,想起算法,小白就飘飘然了.突然后面传来一声呼唤,原来是小刘! 小刘:不好意思啊!堵车了,就来晚了点,不耽误你的时间,咱们就开启的今天的培训内容吧! 小白 ...

  8. Python中的高级数据结构(转)

    add by zhj: Python中的高级数据结构 数据结构 数据结构的概念很好理解,就是用来将数据组织在一起的结构.换句话说,数据结构是用来存储一系列关联数据的东西.在Python中有四种内建的数 ...

  9. CNI插件编写框架分析

    概述 在<CNI, From A Developer's Perspective>一文中,我们已经对CNI有了较为深入的了解.我们知道,容器网络功能的实现最终是通过CNI插件来完成的.每个 ...

  10. Linux which命令

    which常用与查看并显示指定命令的绝对路径,使用which命令,还可以看到某个系统命令是否存在,以及执行的到底是哪一个位置的命令. 1.用法 which [命令] 2.实例 1)查看 ls 命令的绝 ...