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( ...
随机推荐
- maven安装配置参数化打包命令
Maven使用 maven的配置文件看似很复杂,其实只需要根据项目的实际背景,设置个别的几个配置项而已.maven有自己的一套默认配置,使用者除非必要,并不需要去修改那些约定内容.这就是所谓的“约定优 ...
- XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem J. Terminal
题目:Problem J. TerminalInput file: standard inputOutput file: standard inputTime limit: 2 secondsMemo ...
- 防止 IOS 和 安卓 自动锁屏
Ios代码 在文件AppController中的 didFinishLaunchingWithOptions函数中加一行代码即可: [[UIApplication sharedApplication] ...
- netbeans许可证模板设置
工具->模板->设置 user=your name 工具->模板->许可证->默认许可证 <#if licenseFirst??>${licenseFirst ...
- Storm完整例子
import backtype.storm.spout.SpoutOutputCollector; import backtype.storm.task.TopologyContext; import ...
- SQL统计信息解释
[SQL基础]统计信息解释 在平时优化SQL的时候,最长用的就是:SET STATISTICS ON,它可以用来查看我们写的查询语句到底性能如何,不过,究竟这个性能的指标是怎么样的呢?首先需要明白的, ...
- spark + yarn调试问题java.nio.channels.ClosedChannelException
spark客户端提交任务至yarn,后台抛错,FinalStatus:UNDEFINED. ./spark-submit --class org.apache.spark.examples.Spar ...
- Clonal hematopoiesis of indeterminate potential(意义不明的克隆性造血）-CHIP
意义不明的克隆性造血是指由一个造血干细胞或者其他早期的起始血细胞为了更好的适应环境而发展成一个带有一些基因变异的亚型. 这个亚型带有基因变异一般是非驱动性的,而且该亚型占血细胞的比率跟年龄有很大的相关 ...
- 20144303 《Java程序设计》第七周学习总结
20144303 <Java程序设计>第七周学习总结 教材学习内容总结 第十二章 Lambda Lambda表达式中this的参考对象以及toString()的接受者,是来自Lambda的 ...
- libevent库介绍--事件和数据缓冲
首先在学习libevent库的使用前,我们还要从基本的了解开始,已经熟悉了epoll以及reactor,然后从event_base学习,依次学习事件event.数据缓冲Bufferevent和数据封装 ...