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( ...
随机推荐
- Latch free等待事件
Latch free等待事件的三个参数:p1-latch的地址:p2-latch编号:p3-请求次数.从oracle10g起,latchfree不再包含所有的latch等待,有些latch等待可能表现 ...
- knockout 学习使用笔记----绑定map--双向绑定
简单的方式,使用 knockout.mapping.js. 1.引入knockout.mapping.js. 2.声明模型 var model = { task:null, feedbacks:[], ...
- Java设计模式—单例模式
Singleton是一种创建型模式,指某个类采用Singleton模式,则在这个类被创建后,只可能产生一个实例供外部访问,并且提供一个全局的访问点. 核心知识点如下: (1) 将采用单例设计模式的类的 ...
- SPOJ - COT Count on a tree
地址:http://www.spoj.com/problems/COT/en/ 题目: COT - Count on a tree #tree You are given a tree with N ...
- 【Q2D】 2048设计
主要组件 1: GameDirector ,负责胜利.失败.载入上次成绩等 2: Grid, 表格类,负责管理tile二维数组 3: Tile 元素类,就是界面上移动的砖块了 4: InputHelp ...
- Linux查看系统与内核信息（uname、file和lsb_release -a）
uname 命令 uname 命令可以用来查看系统与内核的相关信息,命令格式如下: [root@localhost ~]# uname [选项] 选项: -a:查看系统所有相关信息: -r:查看内核版 ...
- ubuntu下通过mono+jexus布署mvc5网站
本文使用的ubuntu为14.04 LTS 一.安装mono,本文使用源码安装的方式 1.搭架mono编译环境 sudo apt-get update sudo apt-get install bui ...
- keepalived结合lvs
ip划分: RS1:192.168.223.135 RS2:192.168.223.137 节点node1和node2的keepalived(node1:192.168.223.136,node2:1 ...
- Jclemo_ CTF_WEEK1~2学习总结
Jclemo_ CTF_WEEK1~2学习总结 纯属因为感觉有趣,加入了ForDKYCTF小组学习,心得体会就不说了,总结一下最近的学习知识点(不全,参考我自己的940133658@qq.com的印象 ...
- 推荐一个快速了解移植uboot以及linux到新板子上的ppt教程
链接地址在此: https://elinux.org/images/2/2a/Schulz-how-to-support-new-board-u-boot-linux.pdf