首页 > 代码库 > (4)jQuery篇 —— jQuery的事件与事件对象①

(4)jQuery篇 —— jQuery的事件与事件对象①

对于事件,大家肯定是不陌生的。jQuery的事件与JavaScript的事件是一样的,只不过呢,jQuery将跨浏览器的事件做了封装,大家就只管用,不用写一堆逻辑判断那些恶心的跨浏览器的差异了。

1. 事件

(1) blur([[data],fn]) :当元素失去焦点时触发 blur 事件。这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的。

(2) change([[data],fn]) :当元素的值发生改变时,会发生 change 事件。该事件仅适用于文本域(text field),以及 textarea 和 select 元素。当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。

(3) click([[data],fn]) :触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。

(4) dblclick([[data],fn]) :当双击元素时,会发生 dblclick 事件。当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。在很短的时间内发生两次 click,即是一次 double click 事件。提示:如果把 dblclick 和 click 事件应用于同一元素,可能会产生问题。

(5) error([[data],fn]) : 当元素遇到错误(没有正确载入)时,发生 error 事件。

(6) focus([[data],fn]) :当元素获得焦点时,触发 focus 事件。可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数,注意,某些对象不支持focus方法。

(7) focusin([data],fn) :当元素获得焦点时,触发 focusin 事件。focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。

(8) focusout([data],fn) :当元素获得焦点时,触发 focusout 事件。focusout事件跟blur事件区别在于,他可以在父元素上检测子元素获取焦点的情况。

(9) keydown([[data],fn]) :当键盘或按钮被按下时,发生 keydown 事件。注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。

(10) keypress([[data],fn])  :当键盘或按钮被按下时,发生 keypress 事件。keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。 不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。注释:如果在文元素上进行设置,则无论元素是否获得焦点,该事件都会发生。

(11) keyup([[data],fn]) : 当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。

(12) mousedown([[data],fn]) :当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。mousedown 与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。

(13) mouseenter([[data],fn]) :当鼠标指针穿过元素时,会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。

(14) mouseleave([[data],fn]) :当鼠标指针离开元素时,会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。

(15) mousemove([[data],fn]) :当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。mousemove事件处理函数会被传递一个变量——事件对象,其.clientX 和 .clientY 属性代表鼠标的坐标。

(16) mouseout([[data],fn]) :当鼠标指针从元素上移开时,发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。

(17) mouseover([[data],fn]) :当鼠标指针位于元素上方时,会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。

(18) mouseup([[data],fn]) :当在元素上放松鼠标按钮时,会发生 mouseup 事件。与 click 事件不同,mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。

(19) resize([[data],fn]) : 当调整浏览器窗口的大小时,发生 resize 事件。

(20) scroll([[data],fn]) : 当用户滚动指定的元素时,会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。

(21) select([[data],fn])  : 当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。

(22) submit([[data],fn]) :当提交表单时,会发生 submit 事件。该事件只适用于表单元素。

(23) unload([[data],fn])  : 在当用户离开页面时,会发生 unload 事件。

2. 事件切换

(1) hover([over,]out) : 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

(2) toggle([speed],[easing],[fn]) :用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

 

(4)jQuery篇 —— jQuery的事件与事件对象①