jQuery中的事件与应用（学习笔记）

事件机制

事件中的冒泡现象

严格来说，事件在出发后分为两个阶段：一个是捕获，另一个是冒泡；但大多数浏览器并不不是都支持捕获阶段，jQuery也不支持。因此在事件出发后，往往执行冒泡过程。所谓冒泡其实质就是事件执行中的顺序。

如何阻止冒泡的发生

在jQuery中，可以通过stopPropagation()方法可以阻止冒泡过程的发生。

在代码中，除了使用stopPropagation()方法阻止事件的冒泡过程外，还可以通过语句return false实现停止事件的冒泡过程

页面载入事件

ready()方法的工作原理

在jQuery脚本加载到页面时，会设置一个isReady的标记，用于监听页面加载的进度。遇到执行ready()方法时，通过查看isReady值是否被设置，如果未被设置，那么就说明页面并未加载完成，在此情况下，将未完成的部分用一个数组缓存起来，当全部加载完成后，再将未完成的部分通过缓存一一执行。

ready()方法的几种写法

写法一：

$(document).ready(function(){

})

写法二：

$(function(){

})

写法三：

jQuery(document).ready(function(){

})

写法四：

jQuery（function（）{

})

绑定事件

使用bind()方法绑定事件

bind()功能是为每个选择元素的事件绑定处理函数，其语法格式：

bind(type,[data],fn)

其中参数type为一个或多个类型的字符串，也可以自定义类型；参数data是作为even.data属性值传递给事件对象的额外数据对象；参数fn是绑定到每个选择元素的事件中的处理函数。

如果要在一个元素中绑定多个事件，可以将事件用空格隔开。

通过映射方式绑定事件

在jQuery绑定事件时，还可以通过传入一个映射，对所选对象绑定多个事件处理函数。

切换事件

在jQuery中，有两个方法用于事件的切换，一个是hover(),另一个是toggle()。所谓切换事件，即有两个以上的事件绑定一个元素，在元素的行为动作间进行切换。

hover()方法

hover()功能是当鼠标移动到所选元素的上面时，执行指定的第一个函数；当鼠标移出这个元素时，执行指定的第二个元素，其语法格式：

hover(over,out)

其中，参数over为鼠标移到元素时触发的函数，参数out为鼠标移出元素时触发的函数

toggle()方法

在toggle()方法中，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这些函数轮番调用。

toggle()方法的功能是每次单击后依次调用函数，通过函数设置的前后顺序进行调用，其调用的语法格式如下：

toggle(fn,fn2,[fn3,fn4,...])

其中参数fn，fn2，..,fnN为单击时被依次调用的函数

移除事件

unbind()方法移除元素绑定事件

unbind()的功能是移除元素绑定的事件，其调用的语法格式：

unbind([type],[fn])

其中，参数type为移除的事件类型，fn为需要移除的事件处理函数。如果该方法没有参数移除所有绑定的事件；如果带有参数type，移除该参数所指定的事件类型；如果带有参数fn，则只移除绑定时指定的函数fn。

unbind()方法不仅可以移除某类型的全部事件，还可以移除某个指定的自定义事件。

其他事件

one()方法

one()方法功能是为所选的元素绑定一个仅触发一次的处理函数，其调用的语法格式：

one(type,[data],fn)

其中，参数type为事件类型，即需要触发什么类型的事件；参数data为可选参数，表示作为event.data属性值传递给事件对象的额外数据对象；fn为绑定事件时所需要触发的函数。

trigger()方法

trigger()方法的功能是在所选择的元素上触发指定类型的事件。其调用格式：

trigger(type,[data])

其中，参数type为触发时间的类型，参数data为可选，表示再触发事件时传递给函数的附加函数。