五、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()

---

浏览器独立的jQuery.Event方法

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

总结

主要就是记住常用的方法，还有handler传入的参数一般是event，因为可能要阻止事件冒泡传播，另外event还有一些属性，本文并没提到，希望读者自己查阅。

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