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. 配置支持Basler的API函数的开发环境

    第一步:文件说明 使用默认路径安装Basler pylon x86 4.2.1.4845.exe 以后生产的文件如下: 文件说明: apps为用于配置ip和调试相机的软件 bin为驱动程序 CLPro ...

  2. 聊一聊python的单例模式

    单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上用场. ...

  3. 一次http请求中的信息

    什么是Http 一次http传输,是由请求报文和响应报文来完成的 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World W ...

  4. 初探Nginx服务器的整体架构

    高度模块化的设计是 Nginx 的架构基础.Nginx 服务器被分解为多个模块,每个模块就是一个功能模块,只负责自身的功能,模块之间严格遵循“高内聚,低耦合”的原则. 核心模块 核心模块是 Nginx ...

  5. 131. Palindrome Partitioning(回文子串划分 深度优先)

    Given a string s, partition s such that every substring of the partition is a palindrome. Return all ...

  6. 对Java ConcurrentHashMap的一些了解

    ①引言(为什么要使用ConcurrentHashMap) 因为多线程环境下,使用Hashmap进行put操作会引起死循环,导致CPU利用率接近100%,所以在并发情况下不能使用HashMap. Has ...

  7. iOS & Android APP crash保护机制

    一.背景 还在码代码,码好再BB... 二.思路 三.解决方案 四.注意点 五.开源项目 github:https://github.com/qiyer/QYCrashProtector

  8. 解决“检测到有潜在危险的Request.Form值”

    先看如下 web.config 的代码: <system.web>     <compilation debug="true" targetFramework=& ...

  9. java反射 - getXXX 与 getDeclaredXXX

    1.getXXX 和 getDeclaredXXX java 里 Class<?> 有下面这些方法: 类似的方法有: 2.getMethod(s) 和 getDeclaredMethod( ...

  10. java内存解析

    ass BirthDate{ private int day; private int month; private int year; public BirthDate(int d;int m,in ...