《jQuery基础教程》读书笔记10

第10章高级事件处理

要在应用程序中实现交互性，必须时刻关注用户的一举一动并对他们的操作给出响应。通过前面的学习，我们知道jQuery的事件系统可以帮我们解决这个问题。
10.1 再谈事件

先来介绍一下我们的示例文档，这个文档最终将成为一个简单的影集。影集中会显示一组照片，单击链接则会显示更多照片。

10.1.1 追加数据页面
让浏览器响应对某个页面元素的单击。在单击More Photos链接时，需要执行一次Ajax请求，加载下一组照片并将它们追加到<divid="gallery">。

10.1.2 悬停时显示数据
接下来我们要实现的功能，就是在用户鼠标移动到照片上的时候显示照片的详细信息。

$(document).ready(function() {
$('div.photo').hover(function() {
$(this).find('.details').fadeTo('fast', 0.7);
}, function() {
$(this).find('.details').fadeOut('fast');
});
});

这样，当用户光标进入照片区域时，相关信息就会以70%的不透明度淡入显示出来；而当用户光标离开照片时，相关信息则立即淡出。
10.2 事件委托

为了实现事件委托，我们需要检测event对象的target属性，以便知道事件目标是不是我们想要触发行为的那个元素。事件目标，指的是接收到事件的那个最里面、最深层的元素。对于目前的示例程序而言，我们还面临着一个新的挑战：<div class="photo">元素不可能成为事件目标，因为它还包含着其他元素。

10.2.1 使用jQuery的委托方法

在任务变复杂的情况下，手工管理事件委托可能会非常困难。好在，jQuery的.on()方法内置了委托管理能力，为我们扫除了这些障碍。
10.2.2 选择委托的作用域
由于我们要操作的照片被包含在<div id="gallery">中，因此前面的例子将#gallery作为委托的作用域。
10.3 自定义事件

浏览器的DOM实现自然触发的事件对任何Web应用都是至关重要的。但是，在jQuery代码中并不局限于使用这些事件。而是可以在这些事件基础上，再添加自定义事件。

10.3.1 无穷滚动
就像多个不同的事件处理程序可以响应相同事件一样，相同的事件也可以通过多种不同的方式来触发。
10.3.2 自定义事件参数
在定义函数时，可以设置任意数量的参数。而在调用函数时，再给这些参数实际地传入值。类似地，在触发自定义事件时，我们也可以给任何注册的事件处理程序传入额外的信息。这种技术就叫做自定义事件参数。

10.4 节流事件

浏览器中有几个原生事件都会频繁触发。最常见的事件有scroll、resize和mousemove。为了解决这个问题，就需要节流事件。
10.5 扩展事件
诸如mouseenter和ready这样的事件，都是jQuery内部的特殊事件。

小结：如果能够全面地利用jQuery的事件系统，那将给我们的工作带来极大的便利。本章介绍了这个系统的几个方面，包括事件委托方法、自定义事件和事件扩展API。同时，还讨论了如何避免事件委托以及频繁触发事件的一些陷阱。

#笔记##读书笔记#