zoukankan      html  css  js  c++  java
  • Jquery 的bind(), live(), delegate(), on()绑定事件方式

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

    bind()

      适用所有版本,但是根据官网解释,自从jquery1.7版本以后bind()函数推荐用on()来代替。

    live()

      jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替。

    delegate()

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

      jquery1.4.2及其以上版本;

    on()

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

      关于页面加载时页面上没有的元素,可能因为后来javascript添加的元素,所以就算绑定了事件也不会有反应,这里就要把事件绑定到document上,利用冒泡触发事件。

      $(document).on('click', '#clickdiv', function() {

        alert("clicked!");

      });

    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版本为低版本,推荐用delegate(),高版本jquery可以使用on()来代替

  • 相关阅读:
    同一个表中今天的数据与昨天的数据合并,并制定列
    ◎UrlEncode 与 ◎UrlDeCode对应Lotusscript
    ExtJS初级教程之ExtJS Grid(三)
    ExtJS初级教程之ExtJS Tree(一)
    Collections常用的静态方法浅析之排序:sort(List list)
    ExtJS初级教程之ExtJS Tree(三)
    不能被复制的字符:'/u0000'
    ExtJS初级教程之ExtJS Tree(二)
    urlwriterfilter地址栏的伪装
    ExtJS初级教程之ExtJS Grid(一)
  • 原文地址:https://www.cnblogs.com/facial/p/5511032.html
Copyright © 2011-2022 走看看