zoukankan      html  css  js  c++  java
  • jquery bind live delegate on

    1.bind()

    $(selector).bind(event,[data],function)

    bind方法给每个$(selector)元素都注册一个事件处理函数,不支持未来增加的元素。上面两段代码等价的。

    $('p').bind('click',function(){
        alert('p');
    });
    
    $('p").click(function(){
        alert('p');
    });

    2.live()

    $(selector).live(event,[data],function)

    live方法把事件处理函数绑定到document元素上,事件冒泡到document时,检查目标元素是否匹配selector.,并且是否是event事件,若这两个条件都满足,则执行事件处理函数。

    $('p').live('click',function(){
        alert('p');
    });

    3.delegate()

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

    delegate方法把事件处理函数绑定到$(selector)元素上,事件冒泡到$(selector)元素上时,检查目标元素是否匹配childSelector,并且是否event事件,若这两个条件都满足,则执行事件处理函数。

    $('#container').delegate('p',click,function(){
        alert('p');
    });

    4.on()

    $(selector).on(event,[childSelector],[data],function)

    bind方法 live方法 delegate方法都是基于on方法实现的。若有childSelector,是给$(selector)中的元素的子元素添加事件处理函数,事件处理函数添加到$(selector)中的元素上,事件冒泡到$(selector)中的元素时,检测目标元素是否是匹配childSelector的元素,是否是event事件,若两者都是,执行function。若没有childSelector,事件处理函数function绑定到$(selector)中的元素。

    //bind
    $('p').bind('click',function(){
         alert('p');
    });
    $('p').click(function(){
         alert('p');
    });
    $('p').on('click',function(){
        alert('p');
    });
    
    //live
    $('p').live('click',function(){
        alert('p');
    });
    $(document).on('click','p',function(){
        alert('p');
    });
    
    //delegate
    $('#container').delegate('p','click',function(){
        alert('p');
    });
    $('#container').on('click','p',function(){
        alert('p');
    });
  • 相关阅读:
    Linux下修改时间时区的方法介绍
    IIS启用GZip压缩的详细教程(图文)
    jquery定时器的简单代码
    IIS启用GZIP压缩js、css无效的原因及解决方法
    python批量导出导入MySQL用户的方法
    mysql执行计划介绍
    js+json用表格实现简单网站左侧导航
    React Native 二维码扫描组件
    mysql如何修改开启允许远程连接
    react native中的聊天气泡以及timer封装成的发送验证码倒计时
  • 原文地址:https://www.cnblogs.com/fe-huahai/p/5629205.html
Copyright © 2011-2022 走看看