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( ...
随机推荐
- socketserver 并发连接
socketserver.TCPServer Example server side 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
- 如何修改opencart的模版适合为mycncart系统使用
如何修改opencart的模版适合为mycncart系统使用 mycncart跟随opencart的最新代码不断进行升级,并改造和不断加入中国特色的功能,因此opencart的模版均不能够拿来直接套用 ...
- openURL的使用
1)私有方法跳转 /** 私有方法,不建议使用 利用ASCII值进行拼装组合方法.这样可绕过审核. 上面是进入蓝牙界面的方法.也可以有其他的页面可以跳转.设置页面是@"@"Pref ...
- 列表中相同key的字典相加
# 怎么把列表中相同key的字典相加,也就是id的值加id的值,doc_count的值加doc_count的值 # 目标列表 l=[{'id': 5, 'doc_count': 129}, {'id' ...
- C# WinForm 父窗体 子窗体 传值
C# WinForm 父窗体 子窗体 传值 本次示例效果如下:Form1为父窗体(包含textBox1.button1)Form2为子窗体(包含textBox2.button2) 父窗体给子窗体传值= ...
- rootpw密码生成方法/c-exit
linux kickstart文件里rootpw密码可以使用明文,也可以使用加密过的值,这里主要介绍下三种加密方法:md5.sha256.sha512 使用明文的方法 rootpw "pas ...
- HBuilder android 打包指南（V客学院技术分享）
前提:确保配置文件(manifest.json)已配置完,没有异常. 打包选项如下: Android 包名 :在Android系统中是判断一个App的唯一标识,不同的App可以有同样的名字,但是它的包 ...
- git命令学习汇总
GIT 版本控制常用命令汇总 git version 查看当前git版本信息 git help 获取全部命令帮助信息 git help <command> 获取指定命令帮助信息 git c ...
- mysql-community-server安装完后不知道root密码
修改方法: service mysqld stop mysqld_safe --skip-grant-tables & mysql -u root use mysql; update user ...
- saltstack之nginx、php的配置
saltstack为nginx提供状态配置 1.创建nginx配置需要的目录 mkdir /srv/salt/prod/nginx mkdir /srv/salt/prod/nginx/files 2 ...