jQuery——事件

Javascript内置了一些对用户的交互和其他事件给予响应的方式。为了使页面具有动态性和响应性，就需要利用这种能力。jQuery增强并扩展了基本的事件处理机制。它不仅提供了更加优雅的事件处理语法，而且也极大地增强了事件处理机制。

---

在页面加载后执行任务

代码执行的时机选择

$(document).ready()是jQuery基于页面加载执行任务的一种主要方式，但并不是唯一的，原生的window.onload事件也可以实现相同的效果。二者虽然类似，但在触发操作的事件上有着微妙的差异，当加载的资源多到一定程度时方可观察到。

当文档完全下载到浏览器中时，会触发window.onload事件。这意味页面上的全部元素对Javascript而言都是可操作的，这种情况对编写功能性的代码非常有利，因为无需考虑加载的次序。

通过$(document).ready() 注册的事件处理程序，则会在DOM完全就绪并可以使用时调用。虽然这意味着所有元素对脚本而言都是可以访问的，但是，却不意味着所有关联的文件都已经下载完毕。也就是说，当HTML下载完成并解析为DOM树之后，代码就可以运行了。

加载样式与执行代码
为了保证JavaScript代码执行以前页面已经应用了样式，最好在head元素中把link rel=”stylesheet”和style标签放在script标签前面。

什么是加载完成？
一般来说，使用$(document).ready()要优于onload事件处理程序，但是，因为支持文件可能还没有加载完成，所以类似图像的高度和宽度这样的属性此刻不一定有效。如果需要访问这些属性，可能就得选择一个onload事件处理程序（或者使用jQuery为load事件设置处理程序）。

基于一个页面执行多个脚本

通过Javascript（而不是指直接在HTML中添加处理程序属性）注册事件处理程序的传统机制是，把一个函数指定给DOM元素的对应属性。

引用函数与调用函数
将函数指定为处理程序时，省略了后面的圆括号，只使用了函数名。如果带着圆括号，函数会被立即调用；没有圆括号，函数名就只是函数的标识符或函数引用，可以用于在将来再调用函数。

.onload属性一次只能保存一个函数的引用，所以不能在现有的行为基础上再增加新行为。

通过$(document).ready()机制可以解决此问题。每次调用这个方法都会向内部的行为队列中添加一个新的函数，当页面加载完成后，所有函数都会被执行。而且，这些函数会按照注册它们的顺序依次执行。

.ready()的简写形式

前面提到的$(document).ready()结构，实际上是基于document这个DOM元素构建而成的jQuery对象上调用了.ready()方法。

$()函数提供了一种简写方式，当给它传递一个函数作为参数时，jQuery会隐式调用.ready()。

也就是说，对于：

$(document).ready(function)(){ .......});

也可以简写成：

$(function(){........});

向.ready()回调函数中传入参数

某些情况下，可能在同一个页面中使用多个JavaScript库。由于很多库都使用$标识符，因此需要一种方式来避免名称冲突。

因此，jQuery提供了一个jQuery.noConflict()方法，调用该方法可以把对$标识符的控制权让渡给其他数据库。使用其方法的一般模式如下：

    <script src="prototype.js"></script>    <script src="jquery.js"></script>    <script>        jQuery.noConflict();    </script>    <script src="myscript.js"></script>

首先，包含jQuery之外的库，然后，包含jQuery库，取得对$的使用权。接着，调用.noconflict()方法让出 标识符,以便将控制权交还给最先包含的库（ptototype）。

在需要使用jQuery时，必须记住要用jQuery而不是$来调用。

在这种情况下，还有一个在.ready()方法中使用$的技巧。我们传递给它的回调函数可以接收一个参数——jQuery对象本身。利用这个参数，可以重新命名jQuery为\$。

---

处理简单的事件

为了说明某些事件技术，假设希望某个页面能够基于用户的输入呈现出不同的样式，也就是说，允许用户通过单击按钮来切换视图，包括正常视图、将文本限制在窄列中的视图和适合打印的大字内容区视图。

渐进增强
在创建样式转换器时，优秀的Web开发人员应该遵守渐进增强的原则。

.on()方法，可以指定任何DOM事件，并为该事件添加一种行为。

---

事件传播

CSS规范加入了.hover的伪类选择符，这个选择符可以让样式表在用户指针悬停在某个元素上时，影响元素的外观。

jQuery的.hover可以让我们在鼠标指针进入元素和离开元素时，通过Javascript来改变元素的样式——事实上是可以执行任意操作。

.hover()方法接受两个函数参数。第一个函数会在鼠标指针进入被选择的元素时执行，而第二个函数会在鼠标指针离开该元素时触发。

事件的旅程

当页面上发生一个事件时，每个层次上的DOM元素都有机会处理这个事件。

允许多个元素响应单击事件的一种策略叫做事件捕获。 在事件捕获过程中，事件首先会交给最外层的元素，接着再交给更具体的元素。

另一种相反的策略叫做事件冒泡。 即当事件发生时，会首先发送给最具体的元素，在这个元素获得响应机会后 ，事件会向上冒泡到更一般的元素。

DOM标准规定应该同时使用这两种策略：首先，事件要从一般元素到具体元素逐层捕获，然后，事件再通过冒泡返回DOM树的顶层。而事件处理程序可以注册到这个过程中的任何一个阶段。

jQuery始终会在模型的冒泡阶段注册事件处理程序，因此，我们可以假定最具体的元素会首先获得响应事件的机会。

事件冒泡的副作用

事件冒泡可能会导致始料不及的行为，特别是在错误的元素响应mouseover或mouseout事件的情况下。

---

通过事件对象改变事件的旅程

事件对象是一种DOM结构，它会在元素获得处理事件的机会时传递给被调用的事件处理程序。这个对象包含着与事件有关的信息，也提供了可以用来影响在DOM中传递进程的一些方法。

事件目标

事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，但是没有在某些旧版本的浏览器中实现。jQuery对这个事件对象进行了必要的扩展，从而在任何浏览器中都能够使用这个属性。通过.target，可以确定DOM中首先接收到事件的元素（即实际被单击的元素）。

停止事件传播

事件对象还提供了一个.stopPropagation()方法，该方法可以完全阻止事件冒泡。

阻止默认操作

.preventDefault()方法可以在触发默认操作之前终止事件。

在事件的环境中完成了某些验证之后，通常会用到.preventDefault()。例如，在表单提交期间，我们会对用户是否填写了必填字段进行检查，如果用户没有填写相应字段，那么久需要阻止默认操作。

事件传播和默认操作是相互独立的两套机制，在二者任何一方发生时，都可以终止另一方。如果想要同时停止事件船模和默认操作，可以在事件处理程序中返回false，这是对在事件对象上同时调用.stopPropagation()和.preventDefault()的一种简写方式。

事件委托

事件委托就是利用冒泡的一项高级技术，通过事件委托，可以借助一个元素上的事件处理程序完成很多工作。

.is()方法，这个方法接收了一个选择符表达式，然后用选择符来测试当前的jQuery对象。如果集合中至少有一个元素与选择符匹配，.is()返回true。

is()与.hasClass()
要测试元素是否包含某个类，也可使用.hasClass()。不过,.is()方法则更灵活，它可以测试任何选择符表达式。

使用内置的事件委托功能

.on()方法可以接受相应参数实现事件委托。

---

移除事件处理程序

.off()方法移除折叠处理程序。

为事件处理程序添加命名空间

事件命名空间，即在绑定事件时引入附加信息，以便将来识别特定的处理程序。要使用命名空间，需要退一步使用绑定事件处理程序的非简写方法，即.on()方法本身。

为.on()方法传递的第一个参数，应该是想要截获的事件的名称。

对于事件处理系统而言，后缀.collapse是不可见的。

重新绑定事件

使用命名函数时，必须省略函数名称后面的圆括号。

应该为事件处理程序起个名字，以便多次使用。在函数有了可以引用的名字之后，将来就可以再次绑定而无需重新定义它了。

使用命名函数还有一个好处，即不必再使用事件命名空间。因为.off()可以将这个命名函数作为第二个参数，结果只会解除特定处理程序的绑定。

圆括号会导致函数被调用，而非被引用。

对于只需触发一次，随后立即解除绑定的方法——.one()。
用法：

$('#switcher').one('click',toggleSwitcher);

这样会使切换操作只发生一次，之后再也不会发生。

---

模仿用户操作

.trigger()方法可以完成模拟事件的操作。

.trigger()方法提供了一组与.on()方法相同的简写方法。当使用这些方法而不带参数时，结果将是触发操作而不是绑定行为。

响应键盘事件

键盘事件分为两类：直接对键盘按键给出响应的事件（keyup和keydown）和对文本输入给出响应的事件。

键盘事件的目标是当前拥有键盘焦点的元素。