jQuery基础教程第四版 第3章学习笔记

第3章

3.1 在页面加载后执行任务

3.1.1 代码执行的时机选择

① 当文档完全下载到浏览器中时，会触发window.onload事件，意味着页面上的全部元素对于JavaScript而言都是可以操作的。

② 通过(document).ready()注册的事件处理程序，则会在DOM完全就绪并可以使用时调用。意味着所有元素对脚本而言都是可以访问的，但是，却不意味着所有关联的文件都已经下载完毕。3.1.2基于一个页面执行多个脚本①.onload属性一次只能保存对一个函数的引用，所以不能在现有的基础上再增加新行为。②每次调用 (document).ready()方法时都会向内部的行为队列添加一个新函数，当页面加载完成后，所有的函数都会被执行。而且，这些函数会按照注册他们的顺序依次执行。

3.1.3 .ready()的简写形式

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

//这里是代码……

});

可以简写成：

$(function() {

//这里是代码……

}

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

3.2 处理简单的事件

3.2.1 简单的样式转换器

① 在用户单击按钮时执行，需要引入.on()方法。通过这个方法，可以指定任何DOM事件，并为该事件添加一种行为。此时，事件是click。

eg: (‘#switcher-large’).on(‘click’,function(){ });
3.2.2 启用其他按钮
3.2.3 利用事件处理程序的上下文
① 当触发任何事件处理程序时，关键字this引用的都是携带相应行为的DOM元素。通过在事件处理程序中使用(this)，可以为相应的元素创建jQuery对象，然后就如同使用CSS选择符找到该元素一样对它进行操作。

3.2.4 使用事件上下文进一步减少代码

上下文关键字this引用的是DOM元素，而不是jQuery对象，所以可以使用原生的DOM属性来确定被单击元素的ID。

3.2.5 简写的事件

3.2.6 显示和隐藏高级特性

jQuery的toggleClass()方法，能够根据相应的类是否存在而添加或删除类。

3.3 事件传播

3.3.1 事件的旅程

① 事件捕获：事件首先会交给最外层的元素，接着再交给更具体的元素。

上图中，单击事件首先会传递给，然后是，最后是。

② 事件冒泡：事件发生时，会首先发送给最具体的元素，在这个元素获得响应机会之后，事件会向上冒泡到更一般的元素。

上图中：会首先处理事件，然后按照顺序依次是和。

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

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

3.3.2 事件冒泡的副作用

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

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

事件对象是一种DOM结构，他会在元素获得处理事件的机会时传递给被调用的事件处理程序。这个对象中含着与事件有关的信息(例如事件发生时的鼠标指针位置)，也提供了可以用来影响事件在DOM中传递进程的一些方法。

3.4.1 事件目标

事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。 通过.target，可以确定DOM中首先接收到事件的元素（即实现被单击的元素）。而且，我们知道this引用的是处理事件的DOM元素。

3.4.2 停止事件传播

事件对象还提供了一个.stopPropagation()方法，该方法可以完全阻止事件冒泡。与.target类似，这个方法也是一种基本的DOM特性。

3.4.3 阻止默认操作

.stopPropagation()方法不能禁止默认操作（例如，当用户在编辑完表单后按下回车键时，会触发表单的submit事件，在此事件发生后，表单提交才会真正发生）。.preventDefault()方法则可以在触发默认操作之前终止事件。

3.4.4 事件委托

事件委托就是利用冒泡的一项高级技术。想为更多元素注册处理程序，可以只在DOM中的一个祖先元素上指定单击处理程序。由于事件会冒泡，未遭拦截的单击事件最终会到达这个祖先元素，而我们可以在此时再作出相应处理。

3.4.5 使用内置的事件委托功能

3.5 移除事件处理程序

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

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