• 关于jquery的事件委托-bind,live,delegate,on的区别发展


    1.bind()方法 (只能给已经存在的元素上绑定事件)

    只能给调用它的时候已经存在的元素绑定事件,不能给未来新增的元素绑定事件。

    $('ul li').bind('click', function(){
     $(this).addClass('active').siblings().removeClass('active');
    });

    2.live()方法(绑定到document DOM节点上。和.bind()的优势是支持动态数据)

    jQuery 1.3新增的.live()方法代替.bind()方法。live()方法会把click事件绑定到$(document)对象,但是生成了不必要的jQuery对象,导致性能损失;

    (function($){$("#info_table td").live("click",function(){/*显示更多信息*/}); })(jQuery);使用叫做“早委托”的hack,在整个dom元素加载之前调用live可以减少jquery对象的生成,解决上述缺点。(function($){...})(jQuery)是一个“立即执行的匿名函数”,这时候刚好document元素可用,而整个DOM还远未生成。

    为解决“事件传播链”过长的问题,jQuery从1.4开始支持在使用.live()方法时配合使用一个上下文参数:

    $("td",$("#info_table")[0]).live("click",function(){/ 显示更多信息 /});“

    受托方”就从默认的$(document)变成了$("#info_table")[0],节省了冒泡的旅程。只能放在直接选择的元素后面,不支持链接使用,即$("#info_table td").live...可以,但$("#info_table").find("td").live...不行;

    3.delegate()方法(更精确的小范围使用事件代理,性能优于.live())

    为了解决无谓生成元素集合的问题,jQuery 1.4.2干脆直接引入了一个新方法.delegate()

    $("#info_table").delegate("td","click",function(){/*显示更多信息*/});

    优点:(或者说解决了.live()方法的如下问题):

    直接将目标元素选择符("td")、事件("click")及处理程序与“受拖方”$("#info_table")绑定,不额外收集元素、事件传播路径缩短、语义明确;

    支持在连缀的DOM遍历方法后面调用,即支持$("table").find("#info").delegate...,支持精确控制;

    4.on()方法-1.9版本整合了之前的三种方式的新事件绑定机制

    $("#info_table").on("click","td",function(){/*显示更多信息*/});参数的位置写法与delegate不一样

    jQuery 1.7为了解决.bind()、.live()和.delegate()并存造成的不一致性问题,将会增加一对新的事件方法:.on()和.off():

    $(elems).on(events, selector, data, fn);

    $(elems).off(events, selector, fn);//相反的方法

     

    说明:

    on方法是当前JQuery推荐使用的事件绑定方法,附加只运行一次就删除函数的方法是one()。

  • 相关阅读:
    【bzoj2882】工艺 后缀自动机+STL-map
    【bzoj3884】上帝与集合的正确用法 扩展欧拉定理
    【bzoj1475】方格取数 网络流最小割
    【bzoj4825】[Hnoi2017]单旋 线段树+STL-set
    【bzoj4448】[Scoi2015]情报传递 主席树
    【bzoj1803】Spoj1487 Query on a tree III DFS序+主席树
    【bzoj2127】happiness 网络流最小割
    【bzoj2431】[HAOI2009]逆序对数列 dp
    【bzoj4245】[ONTAK2015]OR-XOR 贪心
    【bzoj4066】简单题 KD-tree
  • 原文地址:https://www.cnblogs.com/suhaihong/p/6697999.html
Copyright © 2020-2023  润新知