一、浏览器事件
(1).error()
事件 > 浏览器事件 | 弃用 > 1.8 版本弃用的 API | 已删除的函数
.error()
为 JavaScript 的 “error” 事件绑定一个处理函数。
(2).resize([[data],fn])
事件 > 浏览器事件
为 JavaScript 的 “resize” 事件绑定一个处理函数,或者触发元素上的该事件。
概述
当调整浏览器窗口的大小时,发生 resize 事件。
参数
fn: Function V1.0
在每一个匹配元素的resize事件中绑定的处理函数。
[data],fn String,Function V1.4.3
data: resize([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的resize事件中绑定的处理函数。
(3).scroll()
事件 > 浏览器事件
为 JavaScript 的 “scroll” 事件绑定一个处理函数,或者触发元素上的该事件。
概述
当用户滚动指定的元素时,会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。
参数
fn Function V1.0
在每一个匹配元素的scroll事件中绑定的处理函数。
[data],fn String,Function V1.4.3
data: scroll([Data], fn) 可传入data供函数fn处理。
fn: 在每一个匹配元素的scroll事件中绑定的处理函数。
二、文档加载事件
(1).ready()
概述
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。
有一个参数--对jQuery函数的引用--会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字,并因此可以不再担心命名冲突而放心地使用$别名。
请确保在 元素的onload事件中没有注册函数,否则不会触发+$(document).ready()事件。
可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。
参数
fn Function V1.0
要在DOM就绪时执行的函数
三、鼠标事件
(1).click([[data],fn])
为 JavaScript 的”click” 事件绑定一个处理器,或者触发元素上的 “click” 事件。
概述
触发每一个匹配元素的click事件。
这个函数会调用执行绑定到click事件的所有函数。
参数
fn Function V1.0
在每一个匹配元素的click事件中绑定的处理函数。
[data],fn String,Function V1.4.3
- data: click([Data], fn) 可传入data供函数fn处理。
- fn: 在每一个匹配元素的click事件中绑定的处理函数。
注意:click事件触发需要以下几点:
鼠标指针在元素里面时点击。
鼠标指针在元素里面时释放。
这通常要求的顺序,然后才采取行动。如果这些不被满足,mousedown 或 mouseup事件可能更加合适。
(2).contextmenu()
将事件处理程序绑定到“contextmenu”JavaScript事件,或在元素上触发该事件。
该contextmenu事件被发送到时,点击它的鼠标右键的元素,但在显示上下文菜单之前。如果按下上下文菜单键,则在html元素或当前聚焦的元素上触发事件。任何HTML元素都可以接收此事件。例如,考虑HTML:
(3)dblclick([[data],fn])
为JavaScript 的 “dblclick” 事件绑定一个处理函数,或者触发元素上的 “dblclick” 事件。
(4).hover()
将二个事件函数绑定到匹配元素上,分别当鼠标指针进入和离开元素时被执行。将一个单独事件函数绑定到匹配元素上,分别当鼠标指针进入和离开元素时被执行。
(5).mousedown()
为 JavaScript 的 “mousedown” 事件绑定一个处理函数,或者触发元素上的该事件。
(6).mouseenter()
为 mouse enters(鼠标进入) 事件绑定一个处理函数,或者触发元素上的 mouse enters(鼠标进入) 事件。
(7).mouseleave()
为 mouse leaves(鼠标离开) 事件绑定一个处理函数,或者触发元素上的 mouse leaves(鼠标离开) 事件。
(8).mousemove()
为 JavaScript 的 “mousemove” 事件绑定一个处理函数,或者触发元素上的该事件。
(9).mouseout()
为 JavaScript 的 “mouseout” 事件绑定一个处理函数,或者触发元素上的该事件。(注:支持事件冒泡)
(10).mouseover()
为 JavaScript 的 “mouseover” 事件绑定一个处理函数,或者触发元素上的该事件。(注:支持事件冒泡)
(11).mouseup()
为 JavaScript 的 “mouseup” 事件绑定一个处理函数,或者触发元素上的该事件。
(12).toggle()
事件 > 鼠标事件 | 弃用 > 1.8 版本弃用的 API | 已删除的函数
绑定两个或多个处理程序绑定到匹配的元素,用来执行在交替的点击。
三、键盘事件
(1).keydown([[data],fn])
为 “keydown” 事件绑定一个处理函数,或者触发元素上的 “keydown” 事件。
概述
当键盘或按钮被按下时,发生 keydown 事件。
注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。
参数
fn Function V1.0
在每一个匹配元素的keydown事件中绑定的处理函数。
[data],fn String,Function V1.4.3
data: keydown([Data], fn) 可传入data供函数fn处理。
fn: 在每一个匹配元素的keydown事件中绑定的处理函数。
(2).keypress([[data],fn])
为 “keypress” 事件绑定一个处理函数,或者触发元素上的 “keypress” 事件。
概述
当键盘或按钮被按下时,发生 keypress 事件。
keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。 不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。
参数
fn: Function V1.0
在每一个匹配元素的keypress事件中绑定的处理函数。
[data],fn: String,Function V1.4.3
- data: keypress([Data], fn) 可传入data供函数fn处理。
- fn: 在每一个匹配元素的keypress事件中绑定的处理函数。
(3).keyup([[data],fn])
为 “keyup” 事件绑定一个处理函数,或者触发元素上的 “keyup” 事件。
概述
当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。
注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。
参数
fn: Function V1.0
在每一个匹配元素的keyup事件中绑定的处理函数。
[data],fn: String,Function V1.4.3
- data: keypress([Data], fn) 可传入data供函数fn处理。
- fn: 在每一个匹配元素的keypress事件中绑定的处理函数。
四、表单事件
(1).blur()
为 “blur” 事件绑定一个处理函数,或者触发元素上的 “blur” 事件(注:此事件不支持冒泡)。
可通过返回false来防止触发浏览器的默认行为。Blur事件会在元素失去焦点时触发,既可以是鼠标行为,也可以是按tab键离开的
(2).change()
为JavaScript 的 “change” 事件绑定一个处理函数,或者触发元素上的 “change” 事件。
该事件仅适用于文本域(text field),以及textarea和select元素。当用于select元素时,change事件会在选择某个选项时发生。
(3).focus()
为 JavaScript 的 “focus” 事件绑定一个处理函数,或者触发元素上的 “focus” 事件。
当元素获得焦点时,触发focus事件
(4).focusin()
将一个事件函数绑定到”focusin” 事件。
focusin() 事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。
(5).focusout()
将一个事件函数绑定到”focusout” 事件。
focusout() 事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。
(6).select()
为 JavaScript 的 “select” 事件绑定一个处理函数,或者触发元素上的该事件。
当用户选中单行文本框text或多行文本框textarea的文本时会触发select事件。
(7).submit()
为 JavaScript 的 “submit” 事件绑定一个处理函数,或者触发元素上的该事件。
当提交表单时,会发生submit事件。
Submit()即提交行为
五、事件对象
JQ在事件处理函数中默认传递了event对象,JQ对JS原有的事件对象进行封装,解决了浏览器的兼容性问题,并且创建了一些新的属性和方法,使我们用起来更加方便。
Event对象属性
1. event.type
描述事件的类型
2. event.target
触发该事件的DOM元素
target 属性可以是注册事件时的元素,或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托。
示例:显示点击元素的标签名。
<!DOCTYPE html>
<html>
<head>
<style>
span, strong, p {
padding: 8px; display: block; border: 1px solid #999; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="log"></div>
<div>
<p>
<strong><span>click</span></strong>
</p>
</div>
<script>
$("body").click(function(event) {
$("#log").html("clicked: " + event.target.nodeName);
});
</script>
</body>
</html>
3. event.currentTarget
- 在事件冒泡阶段中的当前DOM元素(表示绑定事件的元素),这个属性总是等于函数的this。
注意:如果您使用jQuery.proxy或另一种形式操作作用域,this 将等于您所提供的context(上下文),而不是event.currentTarget
4. event.relatedTarget
- 返回当鼠标移动时进入或退出的那个 DOM 元素
对于 mouseout 事件,它指向被进入的元素;对于 mouseover 事件,它指向被离开的元素
5. event.data
- 事件调用时额外数据
- 当当前正在执行的处理程序绑定时,一个可选的数据对象传递给一个事件方法。
6. event.pageX/event.pageY
- 显示鼠标相对于文档的左侧和顶部边缘的位置(不包括导航栏的距离)
注意区分:
- screenX/screen 获取显示器屏幕位置的坐标(包括导航栏的距离)
- clientX/clientY 获取相对于页面视口的坐标
7. event.result
- 事件被触发的一个事件处理程序的最后返回值,除非值是 undefined
如果为了DOM元素的同一事件类型绑定了多个事件处理函数,你可以使用result属性获取上一个事件处理函数行的返回值。
此属性当获取自定义事件前一个返回值时非常有用的。
8. event.timeStamp
- 属性用于返回当前事件触发的时间值 。这个时间值是距离1970年1月1日的毫秒数。(返回一个时间戳)
通过在代码中获得两个点之间的 event.timeStamp 值,并给出差值来分析事件的性能,此属性是很有用的。如果只是要确定当前的时间内的事件处理程序,使用(new Date).getTime()来代替。
注意: 有一个 bug open since 2004, 这个值是不正确填充在Firefox 它是不可能知道事件的时间,在该浏览器中创建。
9. event.which
针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键或按钮。
event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。更多细节请参阅: event.charCode on the MDC.
在mousedown、mouseup事件中,event.which属性返回的是对应鼠标按钮的映射代码值(相当于event.button)。以下是主要的鼠标按钮映射代码对应表。
Event.which属性值 对应的鼠标按钮
属性值 | d对应的输入字符 |
---|---|
1 | 鼠标左健 |
2 | 鼠标中健(滚轮键) |
3 | 鼠标右健 |
在 keydown、keyup事件中,event.which属性返回的是对应按键的映射代码值 (相当于event.keyCode).以下是常用的键盘按键映射代码的对应表。
Which属性值 (或范围) 对应的输入字符
属性值 | d对应的输入字符 |
---|---|
48-57 | 对应字符0-9 |
65-90 | 对应字符A-Z |
97-122 | 对应字符a-z |
Which属性值 (或范围) 对应的键盘按键
属性值 | d对应的输入字符 |
---|---|
8 | Backspace键 |
9 | Tab键 |
13 | Enter键 |
16 | Shift键 |
17 | Ctrl键 |
20 | Alt键 |
20 | Caps Lock键(大小写锁定) |
27 | Esc键 |
33-36 | 对应按键 PageUp/PageDown/End/Home |
37-40 | 对应按键左、上、右、下(方向键) |
45-46 | 对应按键Insert、Delete |
48-57 | 对应按键0-9(非小键盘) |
65-90 | 对应按键A-Z |
91 | Windows键 |
96-105 | 对应按键0-9(小键盘) |
106、107、109、110、111 | 对应按键 * + - . / (小键盘) |
112-123 | 对应按键F1-F12 |
10. event.preventDefault()
- 阻止事件的默认动作
例如,在执行这个方法后,如果点击一个链接(a标签),浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了。
11. event.isDefaultPrevented()
- 根据事件对象中是否调用过 event.preventDefault() 方法,来返回一个布尔值。
12. event.stopPropagation()
- 防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数。
注意,这不会阻止同一个元素上的其它事件处理函数的运行。
13. event.isPropagationStopped()
- 根据事件对象中是否调用过 event.stopPropagation() 方法,来返回一个布尔值。