jQuery篇 —— jQuery的事件与事件对象①

Posted 2020-08-19 Amber丶

对于事件，大家肯定是不陌生的。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 事件。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。