一、on(),live(),bind()

  on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

  live() 向当前或未来的匹配元素添加一个或多个事件处理器;

  bind() 向匹配元素添加一个或多个事件处理器。(不能用于当前不存在的元素

  使用方式(三种均相同)

  $(selector).on(event,childselector,data,function)

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

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

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

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

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

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

  childSelector: 可选;需要添加事件处理程序的元素,一般为selector的子元素;  

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

  function:必需;当绑定事件发生时,需要执行的函数;

  适用Jquery版本:jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;

二、delegate()

  delegate() 为指定的元素(被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

  使用方式 

  $(selector).delegate(childSelector,event,data,function)

  childSelector: 必需项;需要添加事件处理程序的元素,一般为selector的子元素

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

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

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

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

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

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

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

  function:必需;当绑定事件发生时,需要执行的函数;

  适用Jquery版本:jquery1.4.2及其以上版本

三、四种方式异同

   相同点:

  1.都支持单元素多事件的绑定;空格相隔方式或者大括号替代方式;

  2.均是通过事件冒泡方式,将事件传递到document进行事件的响应;

   比较和联系:

  1.bind()函数只能针对已经存在的元素进行事件的设置;但是live()、on()、delegate()均支持未来新添加元素的事件设置

  2.bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以用来代替live()函数,live()函数在1.9版本已经删除;

  3.live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些;

  4.bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+;

浅谈Jquery中的bind()、live()、delegate()、on()绑定事件方式相关推荐

  1. 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式

    前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能 ...

  2. [jQuery] 谈一下Jquery中的bind(),live(),delegate(),on()的区别?

    [jQuery] 谈一下Jquery中的bind(),live(),delegate(),on()的区别? 在我们深入了解这些方法之前,我们先来一段常见的的HTML,作为我们编写jquery示例方法使 ...

  3. php中jquery ajax请求参数,浅谈Jquery中Ajax异步请求中的async参数的作用

    之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html asy.js function testAsync{ var temp; $.ajax( ...

  4. 浅谈JQuery中$('.classname').get(0); $('.classname').eq(0); $('.classname')[0]三者的区别

    举例浅谈JQuery中$('.classname').get(0); $('.classname').eq(0); $('.classname')[0]三者的区别 demo Dom结构: <di ...

  5. 【转】jQuery中的bind(),live(),delegate(),on()事件绑定方式的区别

    bind()                                                                                               ...

  6. java中jquery怎么学,浅谈jQuery中的事件--Java学习网

    核心提示:JQuery事件初见1.JQuery中的事件绑定其实呢,JQuery中标准的事件绑定是这样写下:(如下)代码如下:$('#btn').bind('click',function(){}):但 ...

  7. 浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异

    本文结合W3School的文档,分析了jQuery中 wrap() wrapAll() 与 wrapInner()的差异,并给出了图文对比教程,非常的简单实用,有需要的朋友可以参考下 今晚看书的时候发 ...

  8. 浅谈jquery中prop()和attr()

    我们都知道,一般在jquery中设置属性时要用到attr()方法,现在我们有一个效果,点击按钮切换复选框的选中状态,下面贴出html代码: <input type="checkbox& ...

  9. bind(),live(),delegate(),on()绑定事件方式

    1.bind():向匹配元素添加一个或多个事件处理器. 适用所有版本,但是自从jquery1.7版本以后bind()函数推荐用on()来代替. $(selector).bind(event,data, ...

最新文章

  1. WhatFontIs - 字体百科全书,没有不认识的字体
  2. 自学it18大数据笔记-第三阶段Scala-day06——会持续更新……
  3. ArcEngine二次开发_01(鼠标左击右击地图响应不同事件)
  4. Android DownloadManager 的使用
  5. android自定义 ProgressBar(继承自View)
  6. java--idea--生成jar包-2
  7. WPF:更好得理解对话框和ShowDialog方法 .
  8. 【转】极品免费网站空间申请:000webhost.com免费1.5G美国空间PHP+MySQL
  9. Android开发之路:搞懂这几个问题,就掌握了屏幕适配原理
  10. RAID的介绍与配置
  11. php自动上传到onedrive,让iPhone里的照片自动上传备份到OneDrive
  12. wkhtmltopdf 中文参数详解
  13. 如何在 Excel VBA 中插入行
  14. JavaScript中的经典题型(类数组、CSS Sprites、事件委托、经典去重、原型链、闭包、深浅克隆、附带思路流程和源码)
  15. php实现关键字搜索,php关键字搜索
  16. 解决错误 Could not find method leftShift() for arguments
  17. java print快捷键_java输出语句快捷键是什么
  18. 剑三服务器维护是因为人太多吗,【剑网三相关 】阵营对战 从上午10点一直打到第二天凌晨6点半服务器维护 而且今天下午他们又开始打群架了...
  19. minecraft java版皮肤查看_厨师长教你:提取 Minecraft 基岩版付费皮肤并用于 Java 版...
  20. [51nod1355]斐波那契的最小公倍数

热门文章

  1. zerodivisionerror什么意思python-【转】为什么 Python 中的 True 等于 1
  2. python与excel的区别-Python比较两个excel文档内容的异同
  3. LeetCode Top K Frequent Elements
  4. LeetCode Majority Element
  5. wsl开nginx和php-fpm遇到的几个小问题
  6. java读取字符串,生成txt文件
  7. [转]Docker学习之四:使用docker安装mysql
  8. TZOJ 2569 Wooden Fence(凸包求周长)
  9. 几乎死循环的存储过程
  10. 【helloworld】-微信小程序开发教程-入门篇【1】