导言
本节主要学习:
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
。