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 语义清晰，绑定谁，谁就在开头
});
相关推荐
在本章“高级事件（上）”中，我们将探讨编程中的事件处理机制，这是一个关键的概念，尤其是在构建用户界面和交互式应用程序时。事件驱动编程是一种常见的编程范式，它允许程序响应用户输入、系统状态变化或其他外部...
在本章"高级事件（下）"中，我们将深入探讨事件处理在计算机编程中的高级概念，特别是与事件驱动编程相关的技术。这一领域的知识对于构建高效、响应迅速的用户界面和分布式系统至关重要。以下是对该主题的详细阐述：...
在C++编程领域，"高级语言C++程序设计"是一本经典的教材，它...总之，"高级语言C++程序设计第二版答案 第10章"提供的内容对于掌握C++的面向对象编程至关重要，通过练习和答案，学习者可以巩固理论知识，提升编程技能。
第12章主要涉及进程间通信（Inter-Process Communication, IPC），这是Unix系统中一个极其重要的主题，它涵盖了信号量、消息队列、共享内存等机制，这些机制允许不同进程之间交换数据和同步执行。 1. **信号量...
【UNIX环境高级编程（第十四章）】章节主要讲解了UNIX系统中进程间通信（IPC，InterProcess Communication）的各种机制，这些机制允许不同进程之间高效地交换信息，超越了简单的文件共享和进程创建。以下是对各知识...
第10章 高级DOM技术 第11章 表单和数据完整性 第12章 表格排序 第13章 拖放 第14章 错误处理 第15章 JavaScript中的XML 第16章 客户端与服务器端的通讯 第17章 Web服务 第18章 与插件进行交互 第19章 部署问题 第20...
在本章节"JAVA语言程序设计-第十二章 高级用户界面GUI设计"中，我们将深入探讨Java如何创建美观且功能丰富的图形用户界面（GUI）。GUI是计算机软件中与用户进行交互的一种方式，使得非程序员也能轻松操作应用程序。...
综上所述，第17章和第18章分别介绍了.NET框架中关于程序集的管理和跟踪及事件的相关概念与技术。通过对这些知识点的学习，开发者能够更好地理解和掌握.NET平台的应用开发技巧，从而提高开发效率和软件质量。
【Windows高级编程】在开发Windows应用程序时，常常需要进行高级编程以实现特定功能或自定义控件。这一章主要探讨Windows控件的开发，重点在于如何在.NET框架下创建自定义控件。Windows窗体控件是基于System.Windows...
【UNIX环境高级编程（第十五章）】章节主要探讨了UNIX系统中高级的进程间通信（IPC）机制，包括流管道和传送文件描述符。这些技术对于开发高效、灵活的多进程应用程序至关重要。 **15.1 引言** 本章的引入部分提到...
第十二章 高级I/O 第十三章 精灵进程 第十四章 进程间通信 第十五章 高级进程间通信 第十六章 一个数据库函数库 第十七章 与PostScript打印机通信 第十八章 调制解调器拨号器 第十九章 伪终端 附录
第10章的学习内容可能涉及C#的高级特性和数据库的交互。C#是一种面向对象的编程语言，由微软开发，广泛用于Windows平台上的应用开发，尤其是在.NET框架下。在这一章，学生可能会接触到类、对象、接口、继承、多态等...
第10章 日期和时间.ppt 第11章 迭代器、生成器与装饰器.ppt 第12章 文件与文件系统.ppt 第13章 基于thinter的GUI编程.ppt 第14章 Python的高级技术.ppt 第15章 数据库的应用.ppt 第16章 网络编程的应用.ppt 第17章 ...
在本章"第9章Java事件处理"中，我们将会深入探讨这一主题，涵盖了大量的概念、技术和实践应用。这44页的内容可能会包括以下几个主要的知识点： 1. **事件模型**：Java事件处理基于观察者模式，其中事件源（如按钮、...
《Matlab 7.0 第10章 高级数值计算》主要涵盖了数值计算的高级主题，包括多项式、插值、回归分析等关键概念。本章内容旨在深入理解和应用数值计算的基础知识，如矩阵分析、函数分析和数据分析。 1. **多项式**： -...
在本资源中，我们主要关注的是"Mysql数据库第三章高级查询上机练习"。这个练习文件是针对MySQL数据库的学习者，特别是那些希望深入理解和掌握高级查询技术的人群。"第三章上机练习.sql"文件很可能是包含了一系列SQL...
第一部分 jsp入门 第一章 概述 第二章 预备知识 第三章 jsp开发平台的建立--tomcat ... 第十二章 jsp高级应用实例--网上书店 附录A jsp应用实例--网上教育代码 附录B JavaServer Pages白皮书 附录C 常用jsp相关网址
PostgreSQL 10 基础课程第五章 高级知识交叉连接详解