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. Java中的哈夫曼树

    package com.ietree.basic.datastructure.tree; import java.util.ArrayDeque; import java.util.ArrayList ...

  2. (转)CentOs7.3 搭建 RabbitMQ 3.6 Cluster 集群服务与使用

    RabbitMQ是一个开源的AMQP实现,服务器端用Erlang语言编写,支持多种客户端,如:Python.Ruby..NET.Java.JMS.C.PHP.ActionScript.XMPP.STO ...

  3. 等待事件对应的p1,p2,p3含义

    Oracle 10g v$session视图中不同等待事件对应的p1,p2,p3的含义也不同,我们不可能记住所有等待事件对应的p1,p2,p3的含义. 可以通过查询V$EVENT_NAME知道每个等待 ...

  4. Magento 本地搬家至网络服务器步骤

    1.将本地的Magento的数据库备份下来. 2.将本地的Magento网站资料做成ZIP资料. 3.将Magento网站 ZIP资料上传到服务器的域名指向的资料夹内. 4.将ZIP解压出来,移动到域 ...

  5. [C#]浮点数除零无法捕获异常的解决办法

    解决方法: //运算前先检查被除数是否为零,为零则手动抛出除零异常 if (numberB == 0.0) { throw new DivideByZeroException(); } Result ...

  6. TOSCA自动化测试工具--openURL

    在folder下面create test case 输入自己的url,actionMode 是input, String类型

  7. 优化netbeans启动速度

    NetBeans优化的目的是提高NetBeans的启动速度和运行速度.下面介绍的NetBeans优化技巧是在版本6.0beta2上的优化.经过实验,大大提高了NetBeans的启动速度. 1,修改英文 ...

  8. js 空数组 空对象判断

    js 空数组是true还是false   1 2 var arr = new Array(); // 或 var arr = []; 我们知道,初始化后,即使数组arr中没有元素,也是一个object ...

  9. Linux安全基线检查脚本

    基线检查内容: 一:共享账号检查 配置名称:用户账号分配检查,避免共享账号存在配置要求:1.系统需按照实际用户分配账号; 2.避免不同用户间共享账号,避免用户账号和服务器间通信使用的账号共享.操作指南 ...

  10. 20145216史婧瑶《Java程序设计》第二次实验报告

    实验二 Java面向对象程序设计 实验内容 1. 初步掌握单元测试和TDD 2. 理解并掌握面向对象三要素:封装.继承.多态 3. 初步掌握UML建模 4. 熟悉S.O.L.I.D原则 5. 了解设计 ...