on(type,[data],fn)

on有三个参数，type代表事件类型，可以为“click"、"onchange"、"mouseover"

data可以不传，如果传入data，可以在fn中以e.data取到

fn：函数，形参传入e，e.target可以拿到当前被点击的元素

delegate(selector,type,[data],fn)

selector:选择器

on(type,selector,[data],fn)

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>test2</title>

  </head>

  <body>

    <ul id="ul" style="padding:20px">

      <li>1</li>

      <li>2</li>

      <li>3</li>

      <li>4</li>

    </ul>

    <input type="button" value="add" id='add'>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script type="text/javascript">

      $(function(){

        // $("#ul").bind("click",{name:"Annie"},function(e){

        //   console.log(e.target);

        //   console.log(e.data);

        // })

        $("#ul").delegate("li","click",{name:"Annie"},function(e){

          console.log(e.target);

          console.log(e.data);

        })

        // $("#ul").on("click","li",{name:"Annie"},function(e){

        //   console.log(e.target);

        //   console.log(e.currentTarget);

        //   console.log(e.data);

        // })

        $("#add").click(function(){

          console.log('add');

          $("#ul").append("<li>5</li><li>6</li><li>7</li>");

        })

      })

    </script>

  </body>

</html>

bind、delegate、on的区别的更多相关文章

  1. Jquery中bind和live的区别

    Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function ...

  2. Bind和Eval的区别详解

    原文:Bind和Eval的区别详解 1.简单描述Eval和Bind的区别 绑定表达式 <%# Eval("字段名") %> <%# Bind("字段名& ...

  3. [jQuery]on和bind事件绑定的区别

    on和bind事件绑定的区别 一个demo展示 <!DOCTYPE html> <html lang="zh"> <head> <titl ...

  4. bind,call,applay的区别

    方法调用模式: 当一个函数被保存为对象的一个方法时,如果调用表达式包含一个提取属性的动作,那么它就是被当做一个方法来调用,此时的this被绑定到这个对象. var a = 1 var obj1 = { ...

  5. bind call apply 的区别和使用

    bind call apply 的区别和使用:https://www.jianshu.com/p/015f9f15d6b3 在讲这个之前要理解一些概念,这些概念很重要,有人说过学会了javascrip ...

  6. 【转】jQuery中.bind() .live() .delegate() .on()的区别

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...

  7. jQuery中.bind() .live() .delegate() .on()的区别

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...

  8. live(),bind(),delegate()等事件绑定方法的区别及应用解析

    1 首先bind()方法是最直观的,但是也是弊端最大的. $('a').bind('click',function(){alert('that tickles!')}) 这和事件冒泡有直接关系,当我们 ...

  9. jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...

  10. JavaScript--------------------jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){alert( ...

随机推荐

  1. 如何看MFC程序

    一直以来  我都一个疑惑 如果看懂别人的MFC 程序. 今日忽然略有小悟. Q:MFC是啥? A:MFC是类库.. ************* Q :MFC 啥玩意类库? A;MFC 是封装API的类 ...

  2. 工作笔记-javascript-网络层封装

    /** * @Author Mona * @Date 2016-12-08 * @description 网络层封装 */ /** * 封装基本请求方式 */ window.BaseRequest = ...

  3. C++ error C2064:

    error C2064: term does not evaluate to a function 错误原因,非函数,当成函数使用了

  4. centos运行asp.netcore的正确姿势

    centos安装.netcore2.0 一切都很顺利,console app运行 dotnet run也ok 但是asp.net core app运行 dotnet run 会抛出Warn:“Unab ...

  5. unity手势插件《FingerGestures 》使用入门

    什么是FingerGestures? FingerGestures是Unity上,非常热门的一款用于处理用户输入的插件 为什么要使用FingerGestures? 1:它统一了鼠标点击和用户触摸的输入 ...

  6. manager

    S 识别  M 买账 A-安排 R-认同 T-提问识别上级的沟通特点,判断形势,识别沟通的时机摆正自己的角色位置,礼多人不怪,回应情绪做好沟通准备,有策略,安排合适时间听取反馈意见,认同并接纳指导提问 ...

  7. 字符编码的发展（ASCII、Unicode、utf-8）

    最近一直在看廖雪峰老师的python网上教程,python内容简单易理解,就没整理,但是字符串编码作为一直困扰自己的问题,看了几遍文章,最终还是将其整理如下,本篇博客总结自廖雪峰老师的网上教程:htt ...

  8. 生产者消费者JAVA实现

    三种实现方式: 1. Object对象的wait(),notify(),加synchronize. 2. Lock的await(),signal(). 3. BlockingQueue阻塞队列. Ob ...

  9. make menuconfig错误的解决办法

    如果使用make menuconfig的方式配置内核,又碰巧系统没有安装ncurses库(ubuntu系统默认就没有安装此库),就会出现错误,错误信息大体上如下: *** Unable to find ...

  10. HandyJSON第三方库的日常使用与错误记录

    一.错误提示 1.更新Xcode10.2,Swift5.0出现错误提示 Undefined symbols for architecture x86_64: "_swift_getField ...