• jquery中bind,live,delegate,on的区别


    这几种方法都是绑定事件用到的,但是他们之间有些差别

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数

    例如:

        <ul>
              <a href="#"><li>1111111</li></a>
              <a href="#"><li>22222</li></a>
              <a href="#"><li>33333</li></a>
              <a href="#"><li>44444</li></a>
              <a href="#"><li>555555</li></a>
          </ul>
    <script>
        $("a").bind("click",function(){
            alert("ok")
        });
    </script>

    例如当我们用bind为a元素绑定事件时,有多少a元素,就是绑定多少次事件 ,这样比较消费性能

    这种绑定方式有以下缺点:

    1)它会绑定事件到所有选出来的元素上 ,例如上面的a元素

    2)当页面加载完成是,才可以进行bind(),所以效率较低

    3) 不可以为动态创建的html元素绑定事件,即动态创建的html用bind绑定是无效的

    live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的

    以上面的例子为例:

     $("a").live("click",function(){
            alert("ok")
        });

    live是通过冒泡的返航时来绑定事件的,更适合列表页,也可以绑定动态的html,但是目前最新版本的jquery已经不支持live事件绑定了

    delegate(selector,[type],[data],fn) 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数

        <ul>
              <a href="#"><li>1111111</li></a>
              <a href="#"><li>22222</li></a>
              <a href="#"><li>33333</li></a>
              <a href="#"><li>44444</li></a>
              <a href="#"><li>555555</li></a>
          </ul>
          <input type="button" id="btnAdd" value="添加新的元素" />

    点击添加新元素按钮,添加一个li元素,并为新添加的li元素绑定事件,代码如下:

    $("#btnAdd").on("click",function(){
            $("ul").append("<a id='ltLast' href='#''><li>我是后添加的了哦</li></a>");
            
        });
    
         //动态创建的html绑定事件需要用到delegate方法
        $("ul").delegate("#ltLast","click",function(){
                alert("可以点击我么");
            });

    .delegate()主要是通过事件代理的方式,一般动态创建的html绑定事件会用到这种方式

    on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

    .on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制,但是不能为动态的html绑定事件;

  • 相关阅读:
    python读取csv文件、excel文件并封装成dict类型的list,直接看代码
    利用Python获取cookie的方法,相比java代码简便不少
    关于appium操作真机打开app之后无法定位页面元素的问题的解决办法
    关于做移动端ui自动化测试使用PC代理网络会出现的问题
    接口测试面试问题总结-转载
    接口测试3-参数关联接口(从上一个接口中获取数据,访问幼儿园服务器接口无session)
    接口测试2-接口测试 get post请求
    HTTP协议
    接口测试1-概论
    python视频学习笔记8(函数返回值和参数进阶)
  • 原文地址:https://www.cnblogs.com/alice626/p/5280364.html
Copyright © 2020-2023  润新知