五、jQuery中的事件本质

导言

本节主要学习：

jQuery

事件模型

绑定事件处理器到

DOM

元素

事件委托

命名空间划分事

Event

对象实例

触发脚本控制下的事件处理程序

注册主动事件处理器

event是什么

什么是事件呢？直观的说就是网页上发生的事情，大部分是指用户的鼠标动作和键盘动作，如点击、移动鼠标、按下某个键。为什么说大部分呢，因为事件不单单只有这两部分，还有其他的例如

document

的

load

和

unloaded

。只不过我们更加关注的是用户的操作。事件被封装成一个

event

对象，包含了该事件发生时的所有相关信息（

event

的属性）以及可以对事件进行的操作（

event

的方法）。

event

长啥样呢，来直观的看一下，比如我点击页面上一个按钮，产生的

event

对象如下：



可以看到是一个

MouseEvent

对象，包含了一系列属性，如鼠标点击的位置等。那么敲击键盘时产生的

event

对象和它一样吗？看看就知道：



可以看到是一个

KeyboardEvent

对象，并且属性跟上面的也不太一样，如没有

clientX/Y

，那是理所当然的啦，敲键盘怎么能获取到鼠标的位置呢。

若你有一点面向对象编程的基础，看到这两个类名应该会有所思考，

MouseEvent

、

KeyboardEvent

会不会是继承自一个叫

Event

的类呢？恭喜你猜对了，确实如此。来看一下，在

window.onload

监听函数中打印出

event

对象如下：



另外还有很多

Event

的子对象，它们都有类似的属性和方法，我们主要介绍一下它们在

jQuery

中体现。

jQuery事件模型

jQuery

的事件模型实现代码，我们称为

jQuery

事件模型，它的特点如下：

为建立事件处理器提供统一方法

允许每个元素、每个事件类型注册多个方法

适合标准事件名称，如

click

或

mouseover

传递

Event

实例作为第一个类型

规范事件实例中最常用的属性

为事件取消和阻止操作提供统一的方法

使用jQuery附加事件处理器

on()

在事件触发之后运行

trigger()

触发某个事件

为了简化，提供了单独的函数名称

使用下列方法名为指定事件使用的函数建立事件处理器：

语法：

eventName([data,] handler)

blur	focusout	mouseleave	resize
change	keydown	mousemove	scroll
click	keypress	mourceout	select
dblclick	keyup	mouseover	submit
focus	mousedown	mouseup
focusin	mouseenter	ready

使用下列方法名为匹配的元素指定任意行为:

语法：

eventName()

blur	focusout	mouseleave	scroll
change	keydown	mousemove	select
click	keypress	mouseout	submit
dbclick	keyup	mouseover
focus	mousedown	mouseup
focusin	mouseenter	resize

为简化开发，替代

mouseenter()

和

mouseleave()

,提供了

hover()
9270

浏览器独立的jQuery.Event方法

方法	描述
preventDefault()	阻止任意默认的语义动作的的发生(比如表单提交、超链接跳转、勾选框状态改变等)
stopPropagation()	阻止事件沿着 DOM 树向上传播，当前目标的其他事件不受影响，支持使用浏览器事件和自定义事件
stopImediatePropagation()	阻止所有的事件传播，包括当前目标的其他事件
isDefaultPrevented()	如果在实例上调用 preventDefault() ，会返回 true
isPropagationStopped()	如果在实例上调用 stopPropagation() ，就会返回 true
isImmediatePropagetionStopped()	如果在实例上调用 stopImediatePropagation() ，就会返回 true

总结

主要就是记住常用的方法，还有

handler

传入的参数一般是

event

，因为可能要阻止事件冒泡传播，另外

event

还有一些属性，本文并没提到，希望读者自己查阅。

本节的知识并不多，但需要熟练使用，就需要我们多多练习了。下节学习

jQuery

操作

ajax

。