js进阶 12 jquery事件汇总

一、常用事件

页面载入事件

ready() 文档就绪事件（当 HTML 文档就绪可用时）

鼠标事件

click() 触发、或将函数绑定到指定元素的 click 事件
dblclick() 当双击元素时，会发生 dblclick 事件。
mousedown()/mouseup() 鼠标的按下和松开事件
mouseover()/mouseout() 鼠标的移入和移出事件
mouseenter()/mouseleave() 鼠标的移入和移出事件
mouseout()/mouseover()事件在鼠标移入“所选元素及其后代子元素”时都会触发；mouseenter()/mouseleave()事件只有鼠标移入“所选元素”才会触发，如果鼠标仅仅移入“所选元素的后代子元素”的时候，并不会触发。
hover()一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。
mousemove() 当鼠标指针在指定的元素中移动时触发。

键盘事件

keydown() 当键盘或按钮被按下时，发生 keydown 事件。
keyup() 在键盘的某个键被按下之后松开的一瞬间触发的事件。。
keypress() 在键盘上的某个键被按下到松开“整个过程”中触发的事件。

keypress事件只在按下键盘的任一“字符键”（如A~Z、数字键）时触发，单独按下“功能键”（如F1~F12、Ctrl键、Shift键、Alt键等）不会触发；而keydown无论是按下“字符键”还是“功能键”都会触发；

event.which 指示按了哪个键或按钮。

表单事件

blur() 当元素失去焦点时触发 blur 事件。

blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的
focus() 当元素获得焦点时，触发 focus 事件。
focusin()当元素获得焦点时，触发 focusin 事件。
focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
focusout()当元素失去焦点时触发 focusout 事件。
focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
change() 当元素的值发生改变时，会发生 change 事件。
该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。
select() 当用户选中单行文本框text或多行文本框textarea的文本时，会触发select事件。
submit() 当提交表单时，会发生 submit 事件。

其他事件

scroll() 当用户滚动滚动条时会发生 scroll 事件
resize() 当调整浏览器窗口的大小时，发生 resize 事件。
error() 当元素遇到错误（没有正确载入）时，发生 error 事件。注：jQuery 1.0 新增该函数，但从 1.8 开始被标记为已过时。
load() 触发、或将函数绑定到指定元素的 load 事件.注：jQuery 1.0 新增该函数，但从1.8开始被标记为已过时。
unload() 在当用户离开页面时，会发生 unload 事件。注：jQuery 1.0 新增该函数，但从1.8开始被标记为已过时。
toggle() 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。注：1.9版本 .toggle() 方法已经删除

二、事件对象

JavaScript在事件处理函数中默认传递了event对象，在入门视频中我们已经详细讲解过事件对象。jQuery对JavaScript原有的事件对象进行封装，解决了浏览器的兼容性问题，并且创建了一些新的属性和方法，使我们使用起来更加方便。

event对象的属性

event.type 描述事件的类型。
event.target 触发该事件的 DOM 元素。
event.currentTarget 在事件冒泡阶段中的当前DOM元素,等同于'this'
event.relatedTarget 返回当鼠标移动时进入或退出的那个元素
event.data 事件调用时的额外数据
event.pageX/event.pageY 显示鼠标相对于文件的左侧和顶部边缘的位置
注意区分：screenX/screenY：获取显示器屏幕位置的坐标；
clientX/clientY:获取相对于页面视口的坐标
event.result这个属性包含了当前事件事件最后触发的那个处理函数的返回值
如果为DOM元素的同一事件类型绑定了多个事件处理函数，你可以使用result属性获取上一个事件处理函数执行的返回值。
event.timeStamp 属性用于返回当前事件触发的时间值。这个时间值是距离1970年1月1日的毫秒数。

event.which 针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。

event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。

在mousedownmouseup事件中，event.which属性返回的是对应鼠标按钮的映射代码值(相当于event.button)。以下是主要的鼠标按钮映射代码对应表。

event.which属性值	对应的鼠标按钮
1	鼠标左键
2	鼠标中键(滚轮键)
3	鼠标右键

在keydownkeyup事件中，event.which属性返回的是对应按键的映射代码值(相当于event.keyCode)。以下是常用的键盘按键映射代码的对应表：

which属性值(或范围)	对应的输入字符
48 - 57	对应字符 0 - 9
65 - 90	对应字符 A - Z
97 - 122	对应字符 a - z

which属性值(或范围)	对应的键盘按键
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

event.preventDefault() 阻止事件的默认动作。
event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。
event.stopPropagation() 防止事件冒泡
event.isPropagationStopped()判断是否调用过 event.stopPropagation() 方法
event.stopImmediatePropagation() 阻止剩余的事件处理函数执行并且防止事件冒泡
event.isImmediatePropagationStopped() 检测 event.stopImmediatePropagation() 是否被调用过。

三、事件处理

事件绑定

on() 为某些元素绑定一个事件或者多个事件。

该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
事件解绑

off() 解除绑定的某一指定的事件或者所有事件。

“绑定”与“解绑”是相反的关系。在jQuery中，我们可以通过off()方法解除绑定的某一指定的事件或者所有事件。

对同一元素绑定的多个同一事件进行解绑，可以使用命名空间解决，例如‘click.a’‘click.b’
事件委托

通过事件冒泡，让子元素绑定的事件冒泡到父元素(或祖先元素)上，然后再进行处理。
one()为每一个匹配元素的特定事件绑定一个一次性的事件处理函数。
通过one()函数绑定的事件处理函数都是一次性的，只有首次触发事件时会执行该事件处理函数。触发之后，jQuery就会移除当前事件绑定。
trigger() 在每一个匹配的元素上触发某类事件。
triggerHandler() 触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。

与trigger()区别
1. triggerHandler()不会引起事件的默认行为
2. trigger() 会操作匹配的所有元素，而triggerHandler() 只影响第一个匹配元素。
3. triggerHandler() 创建的事件不会产生事件冒泡.
4. triggerHandler()返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。如果没有处理程序被触发，则这个方法返回 undefined。

温馨提示