bind、delegate、on的区别
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的区别的更多相关文章
- Jquery中bind和live的区别
Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function ...
- Bind和Eval的区别详解
原文:Bind和Eval的区别详解 1.简单描述Eval和Bind的区别 绑定表达式 <%# Eval("字段名") %> <%# Bind("字段名& ...
- [jQuery]on和bind事件绑定的区别
on和bind事件绑定的区别 一个demo展示 <!DOCTYPE html> <html lang="zh"> <head> <titl ...
- bind,call,applay的区别
方法调用模式: 当一个函数被保存为对象的一个方法时,如果调用表达式包含一个提取属性的动作,那么它就是被当做一个方法来调用,此时的this被绑定到这个对象. var a = 1 var obj1 = { ...
- bind call apply 的区别和使用
bind call apply 的区别和使用:https://www.jianshu.com/p/015f9f15d6b3 在讲这个之前要理解一些概念,这些概念很重要,有人说过学会了javascrip ...
- 【转】jQuery中.bind() .live() .delegate() .on()的区别
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...
- jQuery中.bind() .live() .delegate() .on()的区别
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...
- live(),bind(),delegate()等事件绑定方法的区别及应用解析
1 首先bind()方法是最直观的,但是也是弊端最大的. $('a').bind('click',function(){alert('that tickles!')}) 这和事件冒泡有直接关系,当我们 ...
- jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画
地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...
- JavaScript--------------------jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){alert( ...
随机推荐
- ADO是什么？
ADO是一个组件,ADO不适于MFC但是可以在MFC里面使用.(ADO在1996年冬被发布.) 由于ADO在MFC使用的比较频繁,所以一些前辈将ADO的三个智能指针封装了. 之后就可以在MFC 更方便 ...
- beego——发行部署
开发模式 通过bee创建的项目,beego默认情况下是开发模式. 我们可以通过如下的方式改变我们的模式: beego.RunMode = "prod" 或者我们在conf/app. ...
- 在Windows下使用Dev-C++开发基于pthread.h的多线程程序【转】
在Windows下使用Dev-C++开发基于pthread.h的多线程程序[转] 在Windows下使用Dev-C++开发基于pthread.h的多线程程序 文章分类:C++编程 ...
- The Air Jordan 4 Oreo Remastered would be re-released in 2015
May be the Jordan 4 Oreo probably the most anticipated pair among the remastered Jordans for 2015? W ...
- Eclipse下创建Maven项目（转）
原文出自:http://www.cnblogs.com/hongwz/p/5456616.html 1.新建Maven项目 1.1 File -> New -> Other 1.2 选择M ...
- 字符串的最小最大表示法O(n)
以下介绍内容内容转自:http://blog.csdn.net/zy691357966/article/details/39854359 网上看了这篇文章后还是感觉有些地方讲的没有详细的证明所以添加了 ...
- Java linkedList详细介绍及使用示例
①LinkedList简单介绍 是一个继承于AbstractSequentialList的双向链表.它可以被当成堆栈.队列或双端队列进行操作. 实现了List接口,能对它进行队列操作. 实现了Dequ ...
- 两个java小练习
网上看到的一个小练习,自己写了一个,但是时间限制并不符合,并且貌似还有些小问题,暂时放在这儿,代码格式什么的也不太规范. 1.班级排名时间限制: 1000ms 内存限制: 65536kB 描述 信息科 ...
- [转]MySQL查看数据库相关信息
原文链接:MySQL查看数据库相关信息 使用MySQL时,需要了解当前数据库的情况,例如当前的数据库大小.字符集.用户等等.下面总结了一些查看数据库相关信息的命令 1:查看显示所有数据库 mysql& ...
- ubuntu下通过mono+jexus布署mvc5网站
本文使用的ubuntu为14.04 LTS 一.安装mono,本文使用源码安装的方式 1.搭架mono编译环境 sudo apt-get update sudo apt-get install bui ...