(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 事件。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

时间: 2024-08-10 18:28:17

(4)jQuery篇 —— jQuery的事件与事件对象①的相关文章

jQuery的document ready与 onload事件——你真的思考过吗?

在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是document.onload? 4. document ready到底是什么ready,DOM渲染完成? 5. jQuery怎么实现$(document).ready? 6. jQuery的ready,还能ready什么? 7. jQuery的document ready就一定比window.onlo

从零开始学习jQuery (五) 事件与事件对象

原文:从零开始学习jQuery (五) 事件与事件对象 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuer

JQuery攻略(四)事件

jQuery事件处理,鼠标的单击,双击,悬停,键盘按键,文本动画..... 此章节有 1.1被点击的按钮查找 1.2事件的自动触发 1.3点击之后禁用按钮 1.4鼠标事件 1.5焦点事件 1.6CSS的操作 1.7元素创建 1.8动画隐藏和展示 1.9效果 1.10键盘输入控制 1.11防止事件冒泡 小结 1.1被点击的按钮查找 一个页面上有很多按钮,对应不同的功能,一个按钮对应一个事件,说到底就是给每个按钮绑定一个事件. <html xmlns="http://www.w3.org/19

javascript事件之:jQuery事件中实例对象和拓展对象之间的通信

我们总结过jQery事件中的实例原型对象对外接口和拓展对象,现在我们看看他们是如何进行通信联系的. 先来看便捷方法: 1 //调用的还是实例对象下的on()和trigger() 2 jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " + 3 "mousedown mouseup mousemove mouseover mouseout mouseenter

Jquery:Jquery中的事件&lt;二&gt;

这几天快忙死了,办了离职还得办入职,完全打乱了我的计划,但是能有一个理想的工作,还是很开心的,以后加把劲,争取把计划再赶上来!不说了,学习!!! 五.事件对象的属性 1.event.type:获取事件的类型,其中event是事件的对象. 2.event.preventDefaule(),在上一个学习笔记中已经有介绍了,该方法是阻止默认的事件事件行为.event.stopPropagation(),该方法的作业是阻止事件的冒泡. 3.event.target,它的作用是获取到触发事件的元素.通过返

jQuery UI 拖动(Draggable) - 事件

定义和用法 draggable 上的 start.drag 和 stop 事件.拖拽开始时触发 start 事件,拖拽期间触发 drag 事件,拖拽停止时触发  stop 事件 示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&

jQuery用unbind方法去掉hover事件及其他方法介绍

近日项目开发十分的繁忙,其中一个需求是实现响应式导航.(响应式的问题我们在css相关的博客中再交流) 大家都知道导航是需要下来菜单效果的,必然就会用到 jQuery的 hover() 方法.若是导航放在ipad中,自然hover()就没有什么意义了.那该如何取消hover()并添加touch事件呢? 今天遇到jquery需要去掉hover的问题,原以为直接unbind(“hover”)就可以搞定,可是搞了半天都报错. 原因其实很简单,hover并不是事件.打开参考手册,hover其实由 mous

jQuery异步加载数据添加事件

几个月前在一个项目中涉及到树形栏,然后看了很多插件,觉得有点麻烦,于是自己写了一个,写着写着就出问题了.当时项目是通过树形栏进行权限控制的,管理员可以对从数据库去的数据动态生成树形栏进行增删改查操作,可是用$(".XX").click();方法是不行的.1.之前用的是jq1.4.3 ,jq1.7一下都可以使用live()方法,来实现该功能 $('#div').live('click',function(){ //do stuff }); 但是live方法也有不支持的事件,例如:togg

JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参

JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转.传参(selected的值和页面其它元素的值) 代码如下: <script src="jquery.min.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(document