jQuery参考手册事件.doc

《jQuery参考手册事件.doc》由会员分享，可在线阅读，更多相关《jQuery参考手册事件.doc（41页珍藏版）》请在三一办公上搜索。

1、jQuery 参考手册 - 事件 Previous Page Next PagejQuery 事件方法事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。触发实例：$(button#demo).click()上面的例子将触发 id=demo 的 button 元素的 click 事件。绑定实例：$(button#demo).click(function()$(img).hide()上面的例子会在点击 id=demo 的按钮时隐藏所有图像。方法描述bind()向匹配元素附加一个或更多事件处理器blur()触发、或将函数绑定到指定元素的 blur 事件change()触发、或将函数

2、绑定到指定元素的 change 事件click()触发、或将函数绑定到指定元素的 click 事件dblclick()触发、或将函数绑定到指定元素的 double click 事件delegate()向匹配元素的当前或未来的子元素附加一个或多个事件处理器die()移除所有通过 live() 函数添加的事件处理程序。error()触发、或将函数绑定到指定元素的 error 事件event.isDefaultPrevented()返回 event 对象上是否调用了 event.preventDefault()。event.pageX相对于文档左边缘的鼠标位置。event.pageY相对于文档上边缘

3、的鼠标位置。event.preventDefault()阻止事件的默认动作。event.result相对于文档上边缘的鼠标位置。event.target触发事件的 DOM 元素。event.timeStamp该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。event.type描述事件的类型。event.which指示按了哪个键或按钮。focus()触发、或将函数绑定到指定元素的 focus 事件keydown()触发、或将函数绑定到指定元素的 key down 事件keypress()触发、或将函数绑定到指定元素的 key press 事件keyup()触发、或将函数绑定到指定

4、元素的 key up 事件live()触发、或将函数绑定到指定元素的 load 事件load()触发、或将函数绑定到指定元素的 load 事件mousedown()触发、或将函数绑定到指定元素的 mouse down 事件mouseenter()触发、或将函数绑定到指定元素的 mouse enter 事件mouseleave()触发、或将函数绑定到指定元素的 mouse leave 事件mousemove()触发、或将函数绑定到指定元素的 mouse move 事件mouseout()触发、或将函数绑定到指定元素的 mouse out 事件mouseover()触发、或将函数绑定到指定元素的

5、mouse over 事件mouseup()触发、或将函数绑定到指定元素的 mouse up 事件one()向匹配元素添加事件处理器。每个元素只能触发一次该处理器。ready()文档就绪事件（当 HTML 文档就绪可用时）resize()触发、或将函数绑定到指定元素的 resize 事件scroll()触发、或将函数绑定到指定元素的 scroll 事件select()触发、或将函数绑定到指定元素的 select 事件submit()触发、或将函数绑定到指定元素的 submit 事件toggle()绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。trigger()所有匹配元素

6、的指定事件triggerHandler()第一个被匹配元素的指定事件unbind()从匹配元素移除一个被添加的事件处理器undelegate()从匹配元素移除一个被添加的事件处理器，现在或将来unload()触发、或将函数绑定到指定元素的 unload 事件参阅教程：jQuery 元素选择器语法jQuery 事件 - bind() 方法实例当点击鼠标时，隐藏或显示 p 元素：$(button).bind(click,function() $(p).slideToggle(););亲自试一试定义和用法bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。将事件和函数

7、绑定到元素规定向被选元素添加的一个或多个事件处理程序，以及当事件发生时运行的函数。语法$(selector).bind(event,data,function)亲自试一试参数描述event必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。data可选。规定传递到函数的额外数据。function必需。规定当事件发生时运行的函数。替代语法$(selector).bind(event:function, event:function, .)亲自试一试参数描述event:function,event:function, .必需。规定事件映射，其中包含一个或多个添加到元素的事件

8、，以及当事件发生时运行的函数。jQuery 事件 - blur() 方法实例当输入域失去焦点 (blur) 时改变其颜色：$(input).blur(function() $(input).css(background-color,#D6D6FF););亲自试一试定义和用法当元素失去焦点时发生 blur 事件。blur() 函数触发 blur 事件，或者如果设置了function参数，该函数也可规定当发生 blur 事件时执行的代码。提示：早前，blur 事件仅发生于表单元素上。在新浏览器中，该事件可用于任何元素。触发 blur 事件触发被选元素的 blur 事件。语法$(selector).

9、blur()亲自试一试将函数绑定到 blur 事件规定当被选元素的 blur 事件发生时运行的函数。语法$(selector).blur(function)亲自试一试参数描述function可选。规定当 blur 事件发生时运行的函数。jQuery 事件 - change() 方法实例当输入域发生变化时改变其颜色：$(.field).change(function() $(this).css(background-color,#FFFFCC););亲自试一试定义和用法当元素的值发生改变时，会发生 change 事件。该事件仅适用于文本域（text field），以及 textarea 和 se

10、lect 元素。change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。注释：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。触发 change 事件触发被选元素的 change 事件。语法$(selector).change()亲自试一试将函数绑定到 change 事件规定当被选元素的 change 事件发生时运行的函数。语法$(selector).change(function)亲自试一试参数描述function可选。规定当 change 事

11、件发生时运行的函数。jQuery 事件 - click() 方法实例当点击按钮时，隐藏或显示元素：$(button).click(function() $(p).slideToggle(););亲自试一试定义和用法当点击元素时，会发生 click 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。触发 click 事件语法$(selector).click()亲自试一试将函数绑定到 click 事件语法$(selector).click(function)参数描述funct

12、ion可选。规定当发生 click 事件时运行的函数。亲自试一试jQuery 事件 - dblclick() 方法实例当双击按钮时，隐藏或显示元素：$(button).dblclick(function() $(p).slideToggle(););亲自试一试定义和用法当双击元素时，会发生 dblclick 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。在很短的时间内发生两次 click，即是一次 double click 事件。dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数。提示：如果把 dblc

13、lick 和 click 事件应用于同一元素，可能会产生问题。触发 dblclick 事件语法$(selector).dblclick()亲自试一试将函数绑定到 dblclick 事件语法$(selector).dblclick(function)参数描述function可选。规定当发生 dblclick 事件时运行的函数。亲自试一试jQuery 事件 - delegate() 方法实例当点击鼠标时，隐藏或显示 p 元素：$(div).delegate(button,click,function() $(p).slideToggle(););亲自试一试定义和用法delegate() 方法为指定

14、的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。语法$(selector).delegate(childSelector,event,data,function)参数描述childSelector必需。规定要附加事件处理程序的一个或多个子元素。event必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。data可选。规定传递到函数的额外数据。function必需。规定当事件发生时运行的函数。亲自试一试 - 实例向未来的元素添加事

15、件处理程序如何使用 delegate() 方法向尚未创建的元素添加事件处理程序。jQuery 事件 - die() 方法实例移除所有通过 live() 方法向 p 元素添加的事件处理程序：$(p).die();亲自试一试定义和用法die() 方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序。语法$(selector).die(event,function)参数描述event必需。规定要移除的一个或多个事件处理程序。由空格分隔多个事件值。必须是有效的事件。function可选。规定要移除的特定函数。亲自试一试 - 实例移除通过 live() 添加的特定函数如何使用 li

16、ve() 方法移除事件处理程序的特定函数。jQuery 事件 - error() 方法实例如果图像不存在，则用一段预定义的文本取代它：$(img).error(function() $(img).replaceWith(Missing image!););亲自试一试定义和用法当元素遇到错误（没有正确载入）时，发生 error 事件。error() 方法触发 error 事件，或规定当发生 error 事件时运行的函数。提示：该方法是 bind(error, handler) 的简写方式。触发 error 事件语法$(selector).error()亲自试一试将函数绑定到 error 事件语法

17、$(selector).error(function)参数描述function可选。规定当发生 error 事件时运行的函数。亲自试一试jQuery 事件 - isDefaultPrevented() 方法实例防止链接打开 URL，并声明来自 isDefaultPrevented() 的结果：$(a).click(function(event) event.preventDefault(); alert(Default prevented: + event.isDefaultPrevented(););亲自试一试定义和用法isDefaultPrevented() 方法返回指定的 event 对

18、象上是否调用了preventDefault() 方法。语法event.isDefaultPrevented()参数描述event必需。规定需要检查的事件。这个event参数来自事件绑定函数。jQuery 事件 - isDefaultPrevented() 方法实例防止链接打开 URL，并声明来自 isDefaultPrevented() 的结果：$(a).click(function(event) event.preventDefault(); alert(Default prevented: + event.isDefaultPrevented(););亲自试一试定义和用法isDefault

19、Prevented() 方法返回指定的 event 对象上是否调用了preventDefault() 方法。语法event.isDefaultPrevented()参数描述event必需。规定需要检查的事件。这个event参数来自事件绑定函数。jQuery 事件 - pageX 属性实例显示鼠标指针的位置：$(document).mousemove(function(e) $(span).text(X: + e.pageX + , Y: + e.pageY););亲自试一试定义和用法pageX() 属性是鼠标指针的位置，相对于文档的左边缘。语法event.pageX参数描述event必需。规定

20、要使用的事件。这个event参数来自事件绑定函数。jQuery 事件 - pageY 属性实例显示鼠标指针的位置：$(document).mousemove(function(e) $(span).text(X: + e.pageX + , Y: + e.pageY););亲自试一试定义和用法pageY() 属性是鼠标指针的位置，相对于文档的上边缘。语法event.pageY参数描述event必需。规定要使用的事件。这个event参数来自事件绑定函数。jQuery 事件 - preventDefault() 方法实例防止链接打开 URL：$(a).click(function(event) e

21、vent.preventDefault(););亲自试一试定义和用法preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表弟的提交）。语法event.preventDefault()参数描述event必需。规定为哪个 event 阻止默认动作。这个event参数来自事件绑定函数。jQuery 事件 - result 属性实例显示最后一次点击事件返回的结果：$(button).click(function(e) $(p).html(e.result););亲自试一试定义和用法result 属性包含由被指定事件触发的事件处理器返回的最后一个值，除非这个值未定义

22、。语法event.result参数描述event必需。规定返回的最后一个值来自哪个事件。这个event参数来自事件绑定函数。jQuery 事件 - target 属性W3C网站有问题实例显示哪个 DOM 元素触发了事件：$(p, button, h1, h2).click(function(event) $(div).html(Triggered by a + event.target.nodeName + element.););亲自试一试定义和用法result 属性包含由被指定事件触发的事件处理器返回的最后一个值，除非这个值未定义。语法event.result参数描述event必需。规定返

23、回的最后一个值来自哪个事件。这个event参数来自事件绑定函数。jQuery 事件 - timeStamp 属性实例显示出当对按钮元素的点击事件发生时的时间戳：$(button).click(function(event) $(span)html(event.timeStamp););亲自试一试定义和用法timeStamp 属性包含从 1970 年 1 月 1 日到事件被触发时的毫秒数。语法event.result参数描述event必需。规定返回该时间戳的事件。这个event参数来自事件绑定函数。jQuery 事件 - timeStamp 属性实例显示出当对按钮元素的点击事件发生时的时间戳：$

24、(button).click(function(event) $(span)html(event.timeStamp););亲自试一试定义和用法timeStamp 属性包含从 1970 年 1 月 1 日到事件被触发时的毫秒数。语法event.result参数描述event必需。规定返回该时间戳的事件。这个event参数来自事件绑定函数。jQuery 事件 - type 属性实例显示触发了哪种类型的事件：$(p).bind(click dblclick mouseover mouseout,function(event) $(div).html(Event: + event.type););亲

25、自试一试定义和用法type 属性描述触发哪种事件类型。语法event.type参数描述event必需。规定要检查的事件。这个event参数来自事件绑定函数。jQuery 事件 - which 属性实例显示按了哪个键：$(input).keydown(function(event) $(div).html(Key: + event.which););亲自试一试定义和用法which 属性指示按了哪个键或按钮。语法event.which参数描述event必需。规定要检查的事件。这个event参数来自事件绑定函数。jQuery 事件 - focus() 方法实例当输入框获得焦点时，改变它的背景色：$(

26、input).focus(function() $(input).css(background-color,#FFFFCC););亲自试一试定义和用法当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数。触发 focus 事件语法$(selector).focus()亲自试一试将函数绑定到 focus 事件语法$(selector).focus(function)参数描述function可选。规定当发生 focus 事件时运行的函数。亲自试一试j

27、Query 事件 - keydown() 方法实例当按下按键时，改变文本域的颜色：$(input).keydown(function() $(input).css(background-color,#FFFFCC););亲自试一试定义和用法完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。当按钮被按下时，发生 keydown 事件。keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。提示：请使用.which 属性来确定按下了哪个按键（亲自试一试

28、）。触发 keydown 事件语法$(selector).keydown()亲自试一试将函数绑定到 keydown 事件语法$(selector).keydown(function)参数描述function可选。规定当发生 keydown 事件时运行的函数。亲自试一试jQuery 事件 - live() 方法实例当点击按钮时，隐藏或显示 p 元素：$(button).live(click,function() $(p).slideToggle(););亲自试一试定义和用法live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。通过 live() 方法附加的事件

29、处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。语法$(selector).live(event,data,function)参数描述event必需。规定附加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。data可选。规定传递到该函数的额外数据。function必需。规定当事件发生时运行的函数。亲自试一试 - 实例向未来的元素添加事件处理器如何使用 live() 方法向尚未创建的元素添加事件处理器。jQuery 事件 - load() 方法实例当图像加载时，改变 div 元素的文本：$(img).load(function() $(div).text(Im

30、age loaded););亲自试一试定义和用法当指定的元素（及子元素）已加载时，会发生 load() 事件。该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）。根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。注释：还存在一个名为 load() 的 jQuery Ajax 方法，根据不同的参数而定。语法$(selector).load(function)参数描述function必需。规定当指定元素加载完成时运行的函数。jQuery 事件 - mousedown() 方法实例当按下鼠标按钮时，隐藏或显示元素：$(button).

31、mousedown(function() $(p).slideToggle(););亲自试一试定义和用法当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数。触发 mousedown 事件语法$(selector).mousedown()亲自试一试将函数绑定到 mousedown 事件语法$(selector).mousedown(function)参数描述functio

32、n可选。规定当发生 mousedown 事件时运行的函数。亲自试一试jQuery 事件 - mouseenter() 方法实例当鼠标指针进入（穿过）元素时，改变元素的背景色：$(p).mouseenter(function() $(p).css(background-color,yellow););亲自试一试定义和用法当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave事件一起使用。mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数。注释：与 mouseover 事件不同，只有在鼠标

33、指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。请看下面例子的演示。亲自试一试：mouseenter 与 mouseover 的不同触发 mouseenter 事件语法$(selector).mouseenter()亲自试一试将函数绑定到 mouseenter 事件语法$(selector).mouseenter(function)参数描述function可选。规定当发生 mouseenter 事件时运行的函数。亲自试一试jQuery 事件 - mouseleave() 方法实例当鼠标指针离开元素时，改变元素的背景色：

34、$(p).mouseleave(function() $(p).css(background-color,#E9E9E4););亲自试一试定义和用法当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter事件一起使用。mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数。注释：与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。请看下面例子的演示。亲自试一试：mouseleave

35、 与 mouseout 的不同触发 mouseleave 事件语法$(selector).mouseleave()亲自试一试将函数绑定到 mouseleave 事件语法$(selector).mouseleave(function)参数描述function可选。规定当发生 mouseleave 事件时运行的函数。亲自试一试jQuery 事件 - mousemove() 方法实例获得鼠标指针在页面中的位置：$(document).mousemove(function(e) $(span).text(e.pageX + , + e.pageY););亲自试一试定义和用法当鼠标指针在指定的元素中移动

36、时，就会发生 mousemove 事件。mousemove() 方法触发 mousemove 事件，或规定当发生 mousemove 事件时运行的函数。注意：用户把鼠标移动一个像素，就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。触发 mousemove 事件语法$(selector).mousemove()将函数绑定到 mousemove 事件语法$(selector).mousemove(function)参数描述function可选。规定当发生 mousemove 事件时运行的函数。亲自试一试jQuery 事件 - mouseo

37、ut() 方法实例当鼠标从元素上移开时，改变元素的背景色：$(p).mouseout(function() $(p).css(background-color,#E9E9E4););亲自试一试定义和用法当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与mouseover事件一起使用。mouseout() 方法触发 mouseout 事件，或规定当发生 mouseout 事件时运行的函数。注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

38、请看下面例子的演示。亲自试一试：mouseleave 与 mouseout 的不同触发 mouseout 事件语法$(selector).mouseout()亲自试一试将函数绑定到 mouseout 事件语法$(selector).mouseout(function)参数描述function可选。规定当发生 mouseout 事件时运行的函数。亲自试一试jQuery 事件 - mouseover() 方法实例当鼠标指针位于元素上方时时，改变元素的背景色：$(p).mouseover(function() $(p).css(background-color,yellow););亲自试一试定义和用

39、法当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与mouseout事件一起使用。mouseover() 方法触发 mouseover 事件，或规定当发生 mouseover 事件时运行的函数。注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。请看下面例子的演示。亲自试一试：mouseenter 与 mouseover 的不同触发 mouseover 事件语法$(selector).mouseover()亲自试一试将函数绑定到 mou

40、seover 事件语法$(selector).mouseover(function)参数描述function可选。规定当发生 mouseover 事件时运行的函数。亲自试一试jQuery 事件 - mouseup() 方法实例当松开鼠标按钮时，隐藏或显示元素：$(button).mouseup(function() $(p).slideToggle(););亲自试一试定义和用法当在元素上放松鼠标按钮时，会发生 mouseup 事件。与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。mouseup() 方法触发 mouseup 事

41、件，或规定当发生 mouseup 事件时运行的函数。触发 mouseup 事件语法$(selector).mouseup()亲自试一试将函数绑定到 mouseup 事件语法$(selector).mouseup(function)参数描述function可选。规定当发生 mouseup 事件时运行的函数。亲自试一试jQuery 事件 - one() 方法实例当点击 p 元素时，增加该元素的文本大小：$(p).one(click,function() $(this).animate(fontSize:+=6px););亲自试一试定义和用法one() 方法为被选元素附加一个或多个事件处理程序，并规

42、定当事件发生时运行的函数。当使用 one() 方法时，每个元素只能运行一次事件处理器函数。语法$(selector).one(event,data,function)参数描述event必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。data可选。规定传递到函数的额外数据。function必需。规定当事件发生时运行的函数。jQuery 事件 - ready() 方法实例在文档加载后激活函数：$(document).ready(function() $(.btn1).click(function() $(p).slideToggle(); ););亲自试一试定义和用法当

43、 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。ready() 函数规定当 ready 事件发生时执行的代码。ready() 函数仅能用于当前文档，因此无需选择器。允许使用以下三种语法：语法 1$(document).ready(function)语法 2$().ready(function)语法 3$(function)参数描述function必需。规定当文档加载后要运行的函数。提示和注释提示：ready() 函数不应与 一起使用。jQuery 事件 - resize() 方法实例对浏览器窗口调整大小进行计数