index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>事件对象</title> <script type="text/javascript" src="jquery-1.10.1.js"></script> <script type="text/javascript" src="jquery-migrate-1.2.1.js"></script> <script type="text/javascript" src="demo.js"></script> <link type="text/css" rel="stylesheet" href="style.css" /> </head> <body> <div style="width:200px; height:200px; background:green;" id="box"> <input type="button" class="button" value="按钮" /> <input type="button" class="button" value="按钮" /> <input type="button" class="button" value="按钮" /> </div> </body> </html>
demo.js
$(function(){ /* //.bind() 绑定了三个事件 $('.button').bind('click',function(){ alert('事件不委托!'); }); //使用 live 绑定的是 document ,而非 button //所以,永远只会绑定一次事件 $('.button').live('click',function(){ alert('事件委托!'); }); //.bind 无法动态绑定事件 $('.button').bind('click',function(){ $(this).clone().appendTo('#box'); }); //.live 可以动态绑定事件,因为事件绑定在 document 上 $('.button').live('click',function(){ $(this).clone().appendTo('#box'); }); //.live 可以动态绑定事件,因为事件绑定在 document 上 $('.button').live('click',function(){ $(this).clone().appendTo('#box'); }); //.live 绑定在 document 上,而点击.button 其实在冒泡到 document 上 //并且点击到 document 时候,需要验证 event.type 和 event.target 才能触发 //.live 是不支持元素连缀的 $('#box').children(0).live('click',function(){ $(this).clone().appendTo('#box'); }); $('.button').live('click',function(){ $(this).clone().appendTo('#box'); }); $('.button').die('click'); $('.button').bind('click',function(){ $(this).clone(true).appendTo('#box'); }); $('.button').live('click',function(){ $('<input type="button" class="button" value="按钮" />').appendTo('#box'); }); */ //.live 的替代方法 delegate $('#box').delegate('.button','click',function(){ $(this).clone().appendTo('#box'); }); $('#box').undelegate('.button','click'); //live 语义不清晰,由于他没有指定绑定了谁,所以不清晰 //delegate 语义清晰,绑定谁,谁就在开头 });
相关推荐
NULL 博文链接:https://onestopweb.iteye.com/blog/2225326
NULL 博文链接:https://onestopweb.iteye.com/blog/2224509
完整版 Java高级教程 Java语言程序设计 第4章 Java泛型(共10页).ppt 完整版 Java高级教程 Java语言程序设计 第5章 Java反射(共9页).ppt 完整版 Java高级教程 Java语言程序设计 第6章 常用设计模式(共25页).ppt...
高级语言C++程序设计第二版答案 第10章课后习题答案,全部为cpp文件,内容详细,程序经过调试,含注释。
第10章Windows高级编程.pdf
Android第十四章高级技巧
第10章 高级DOM技术 第11章 表单和数据完整性 第12章 表格排序 第13章 拖放 第14章 错误处理 第15章 JavaScript中的XML 第16章 客户端与服务器端的通讯 第17章 Web服务 第18章 与插件进行交互 第19章 部署问题 第20...
第12章 高级I/O 273 12.1 引言 273 12.2 非阻塞I/O 273 12.3 记录锁 275 12.3.1 历史 276 12.3.2 fcntl记录锁 276 12.3.3 锁的隐含继承和释放 280 12.3.4 4.3+BSD的实现 281 12.3.5 建议性锁和强制性锁 284 12.4 流 ...
Oracle Developer:第10章 高级重用设计.pdf
第10章SQL高级应用.doc
博文:http://blog.csdn.net/i_scream_/article/details/52972695 的示例代码
oracle_专家高级编程_中文第十三章
oracle_专家高级编程_中文第十二章
高级会计学第十章课后参考答案.doc
第十二章 高级I/O 第十三章 精灵进程 第十四章 进程间通信 第十五章 高级进程间通信 第十六章 一个数据库函数库 第十七章 与PostScript打印机通信 第十八章 调制解调器拨号器 第十九章 伪终端 附录
[Csharp高级编程(第6版)]17章程序集、18章跟踪和事件.pdf
Java SE完整版精品优质课件 自学入门必看的优秀Java基础知识培训教案 特别适合新入门自学的新手同学,也适合老手回顾学习,巩固知识 ...第10章 IO 第11章 多线程 第12章 Java常用类 第13章 Java反射 第14章 网络编程