jQuery1.1 API 中文版 第六部分Events

jQuery1.1 API 中文版 第六部分Events
url: http://jquery.org.cn/visual/cn/index.xml

第六部分Events

1. bind(type, data, fn)
为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。 多数情况下，可以把事件处理器函数定义为匿名函数（见示例一）。在不可能定义匿名函数的情况下，可以传递一个可选的数据对象作为第二个参数（而事件处理器函数则作为第三个参数），见示例二。

Binds a handler to a particular event (like click) for each matched element. The event handler is passed an event object that you can use to prevent default behaviour. To stop both default action and event bubbling, your handler has to return false. In most cases, you can define your event handlers as anonymous functions (see first example). In cases where that is not possible, you can pass additional data as the second paramter (and the handler function as the third), see second example.

返回值
jQuery

参数
type (String): 事件类型
data (Object): (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn (Function): 绑定到每个匹配元素的事件上面的处理函数
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").bind("click", function(){ alert( $(this).text() ); });
 
结果:
alert("Hello")
 
--------------------------------------------------------------------------------

 

说明:
为事件对象传递一些额外的数据。

jQuery 代码:
function handler(event) { alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler)
 
结果:
alert("bar")
 
--------------------------------------------------------------------------------

 

说明:
通过返回false来取消默认的行为并阻止事件起泡。

jQuery 代码:
$("form").bind("submit", function() { return false; })
 
--------------------------------------------------------------------------------

 

说明:
通过使用 preventDefault 方法只取消默认的行为。

jQuery 代码:
$("form").bind("submit", function(event){ event.preventDefault(); });
 
--------------------------------------------------------------------------------

 

说明:
通过使用 stopPropagation 方法只阻止事件起泡。

jQuery 代码:
$("form").bind("submit", function(event){ event.stopPropagation(); });

 

2. blur()
触发每一个匹配元素的blur事件。这个函数会调用执行绑定到blur事件的所有函数。 注意：这个函数不会调用相应元素的blur方法！如果需要通过代码来使一个元素获得焦点，必须使用DOM方法，例如：$("#myinput")[0].blur();

Trigger the blur event of each matched element. This causes all of the functions that have been bound to thet blur event to be executed. Note: This does not execute the blur method of the underlying elements! If you need to blur an element via code, you have to use the DOM method, eg. $("#myinput")[0].blur();

返回值
jQuery

示例
HTML 代码:
<p οnblur="alert('Hello');">Hello</p>
 
jQuery 代码:
$("p").blur();
 
结果:
alert('Hello');

 

3. blur(fn)
在每一个匹配元素的blur事件中绑定一个处理函数。

Bind a function to the blur event of each matched element.

返回值
jQuery

参数
fn (Function): 在每一个匹配元素的blur事件中绑定的处理函数。
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").blur( function() { alert("Hello"); } );
 
结果:
<p οnblur="alert('Hello');">Hello</p>

 

4. change(fn)
在每一个匹配元素的change事件中绑定一个处理函数。

Bind a function to the change event of each matched element.

返回值
jQuery

参数
fn (Function): 在每一个匹配元素的change事件中绑定的处理函数。
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").change( function() { alert("Hello"); } );
 
结果:
<p οnchange="alert('Hello');">Hello</p>

 

5. click()
触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。

Trigger the click event of each matched element. This causes all of the functions that have been bound to thet click event to be executed.

返回值
jQuery

示例
HTML 代码:
<p οnclick="alert('Hello');">Hello</p>
 
jQuery 代码:
$("p").click();
 
结果:
alert('Hello');

 

6. click(fn)
在每一个匹配元素的click事件中绑定一个处理函数。

Bind a function to the click event of each matched element.

返回值
jQuery

参数
fn (Function): 在每一个匹配元素的click事件中绑定的处理函数。
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").click( function() { alert("Hello"); } );
 
结果:
<p οnclick="alert('Hello');">Hello</p>

7. dblclick(fn)
在每一个匹配元素的dblclick事件中绑定一个处理函数。

Bind a function to the dblclick event of each matched element.

返回值
jQuery

参数
fn (Function): 在每一个匹配元素的dblclick事件中绑定的处理函数。
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").dblclick( function() { alert("Hello"); } );
 
结果:
<p οndblclick="alert('Hello');">Hello</p>

 

8. error(fn)
在每一个匹配元素的error事件中绑定一个处理函数。

Bind a function to the error event of each matched element.

返回值
jQuery

参数
fn (Function): 在每一个匹配元素的error事件中绑定的处理函数。
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").error( function() { alert("Hello"); } );
 
结果:
<p οnerrοr="alert('Hello');">Hello</p>

 

9. focus()
触发每一个匹配元素的focus事件。这个函数会调用执行绑定到focus事件的所有函数。 注意：这个函数不会调用相应元素的focus方法！如果需要通过代码来使一个元素获得焦点，必须使用DOM方法，例如：$("#myinput")[0].focus();

Trigger the focus event of each matched element. This causes all of the functions that have been bound to thet focus event to be executed. Note: This does not execute the focus method of the underlying elements! If you need to focus an element via code, you have to use the DOM method, eg. $("#myinput")[0].focus();

返回值
jQuery

示例
HTML 代码:
<p οnfοcus="alert('Hello');">Hello</p>
 
jQuery 代码:
$("p").focus();
 
结果:
alert('Hello');

 

10. focus(fn)
在每一个匹配元素的focus事件中绑定一个处理函数。

Bind a function to the focus event of each matched element.

返回值
jQuery

参数
fn (Function): 在每一个匹配元素的submit事件中绑定的处理函数。
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").focus( function() { alert("Hello"); } );
 
结果:
<p οnfοcus="alert('Hello');">Hello</p>

 

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

A method for simulating hovering (moving the mouse on, and off, an object). This is a custom method which provides an 'in' to a frequent task. Whenever the mouse cursor is moved over a matched element, the first specified function is fired. Whenever the mouse moves off of the element, the second specified function fires. Additionally, checks are in place to see if the mouse is still within the specified element itself (for example, an image inside of a div), and if it is, it will continue to 'hover', and not move out (a common error in using a mouseout event handler).

返回值
jQuery

参数
over (Function): 鼠标移到元素上要触发的函数
out (Function): 鼠标移出元素要触发的函数
示例
jQuery 代码:
$("p").hover(function(){ $(this).addClass("over"); },function(){ $(this).addClass("out"); });

 

12. keydown(fn)
在每一个匹配元素的keydown事件中绑定一个处理函数。

Bind a function to the keydown event of each matched element.

返回值
jQuery

参数
fn (Function): 在每一个匹配元素的keydown事件中绑定的处理函数。
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").keydown( function() { alert("Hello"); } );
 
结果:
<p οnkeydοwn="alert('Hello');">Hello</p>

 

13. keypress(fn)
在每一个匹配元素的keypress事件中绑定一个处理函数。

Bind a function to the keypress event of each matched element.

返回值
jQuery

参数
fn (Function): 在每一个匹配元素的keypress事件中绑定的处理函数。
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").keypress( function() { alert("Hello"); } );
 
结果:
<p οnkeypress="alert('Hello');">Hello</p>

 

14. keyup(fn)
在每一个匹配元素的keyup事件中绑定一个处理函数。

Bind a function to the keyup event of each matched element.

返回值
jQuery

参数
fn (Function): 在每一个匹配元素的keyup事件中绑定的处理函数。
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").keyup( function() { alert("Hello"); } );
 
结果:
<p οnkeyup="alert('Hello');">Hello</p>

 

15. load(fn)
在每一个匹配元素的load事件中绑定一个处理函数。

Bind a function to the load event of each matched element.

返回值
jQuery

参数
fn (Function): 在每一个匹配元素的load事件中绑定的处理函数。
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").load( function() { alert("Hello"); } );
 
结果:
<p οnlοad="alert('Hello');">Hello</p>

 

16. mousedown(fn)
在每一个匹配元素的mousedown事件中绑定一个处理函数。

Bind a function to the mousedown event of each matched element.

返回值
jQuery

参数
fn (Function): 在每一个匹配元素的mousedown事件中绑定的处理函数。
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").mousedown( function() { alert("Hello"); } );
 
结果:
<p οnmοusedοwn="alert('Hello');">Hello</p>

 

17. mousemove(fn)
在每一个匹配元素的mousemove事件中绑定一个处理函数。

Bind a function to the mousemove event of each matched element.

返回值
jQuery

参数
fn (Function): 在每一个匹配元素的mousemove事件中绑定的处理函数。
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").mousemove( function() { alert("Hello"); } );
 
结果:
<p οnmοusemοve="alert('Hello');">Hello</p>

 

18. mouseout(fn)
在每一个匹配元素的mouseout事件中绑定一个处理函数。

Bind a function to the mouseout event of each matched element.

返回值
jQuery

参数
fn (Function): 在每一个匹配元素的mouseout事件中绑定的处理函数。
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").mouseout( function() { alert("Hello"); } );
 
结果:
<p οnmοuseοut="alert('Hello');">Hello</p>

 

19. mouseover(fn)
在每一个匹配元素的mouseover事件中绑定一个处理函数。

Bind a function to the mouseover event of each matched element.

返回值
jQuery

参数
fn (Function): 在每一个匹配元素的mouseover事件中绑定的处理函数。
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").mouseover( function() { alert("Hello"); } );
 
结果:
<p οnmοuseοver="alert('Hello');">Hello</p>

 

20. mouseup(fn)
在每一个匹配元素的mouseup事件中绑定一个处理函数。

Bind a function to the mouseup event of each matched element.

返回值
jQuery

参数
fn (Function): 在每一个匹配元素的mouseup事件中绑定的处理函数。
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").mouseup( function() { alert("Hello"); } );
 
结果:
<p οnmοuseup="alert('Hello');">Hello</p>

 

21. one(type, data, fn)
为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。 多数情况下，可以把事件处理器函数定义为匿名函数（见示例一）。在不可能定义匿名函数的情况下，可以传递一个可选的数据对象作为第二个参数（而事件处理器函数则作为第三个参数），见示例二。

Binds a handler to a particular event (like click) for each matched element. The handler is executed only once for each element. Otherwise, the same rules as described in bind() apply. The event handler is passed an event object that you can use to prevent default behaviour. To stop both default action and event bubbling, your handler has to return false. In most cases, you can define your event handlers as anonymous functions (see first example). In cases where that is not possible, you can pass additional data as the second paramter (and the handler function as the third), see second example.

返回值
jQuery

参数
type (String): 事件类型
data (Object): (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn (Function): 绑定到每个匹配元素的事件上面的处理函数
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").one("click", function(){ alert( $(this).text() ); });
 
结果:
alert("Hello")

 

22. ready(fn)
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。 简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。 有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。 请确保在<body>元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。 可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

Bind a function to be executed whenever the DOM is ready to be traversed and manipulated. This is probably the most important function included in the event module, as it can greatly improve the response times of your web applications. In a nutshell, this is a solid replacement for using window.onload, and attaching a function to that. By using this method, your bound Function will be called the instant the DOM is ready to be read and manipulated, which is exactly what 99.99% of all Javascript code needs to run. There is one argument passed to the ready event handler: A reference to the jQuery function. You can name that argument whatever you like, and can therefore stick with the $ alias without risc of naming collisions. Please ensure you have no code in your <body> onload event handler, otherwise $(document).ready() may not fire. You can have as many $(document).ready events on your page as you like. The functions are then executed in the order they were added.

返回值
jQuery

参数
fn (Function): 要在DOM就绪时执行的函数
示例
jQuery 代码:
$(document).ready(function(){ Your code here... });
 
--------------------------------------------------------------------------------

 

说明:
同时使用$(document).ready()和参数来编写应用$别名的具有安全保障（failsafe）的jQuery代码，从而不会依赖于全局别名。

jQuery 代码:
jQuery(function($) { // Your code using failsafe $ alias here... });

 

23. resize(fn)
在每一个匹配元素的resize事件中绑定一个处理函数。

Bind a function to the resize event of each matched element.

返回值
jQuery

参数
fn (Function): 在每一个匹配元素的resize事件中绑定的处理函数。
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").resize( function() { alert("Hello"); } );
 
结果:
<p οnresize="alert('Hello');">Hello</p>

 

24. scroll(fn)
在每一个匹配元素的scroll事件中绑定一个处理函数。

Bind a function to the scroll event of each matched element.

返回值
jQuery

参数
fn (Function): 在每一个匹配元素的scoll事件中绑定的处理函数
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").scroll( function() { alert("Hello"); } );
 
结果:
<p οnscrοll="alert('Hello');">Hello</p>

 

25. select()
触发每一个匹配元素的select事件。这个函数会调用执行绑定到select事件的所有函数。

Trigger the select event of each matched element. This causes all of the functions that have been bound to thet select event to be executed.

返回值
jQuery

示例
HTML 代码:
<p οnselect="alert('Hello');">Hello</p>
 
jQuery 代码:
$("p").select();
 
结果:
alert('Hello');

 

26. select(fn)
在每一个匹配元素的select事件中绑定一个处理函数。

Bind a function to the select event of each matched element.

返回值
jQuery

参数
fn (Function): 在每一个匹配元素的select事件中绑定的处理函数。
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").select( function() { alert("Hello"); } );
 
结果:
<p οnselect="alert('Hello');">Hello</p>

 

27. submit()
触发每一个匹配元素的submit事件。这个函数会调用执行绑定到submit事件的所有函数。 注意：这个函数不会调用form元素的submit方法！如果需要通过代码来提交表单，必须使用DOM方法，例如：$("form")[0].submit();

Trigger the submit event of each matched element. This causes all of the functions that have been bound to thet submit event to be executed. Note: This does not execute the submit method of the form element! If you need to submit the form via code, you have to use the DOM method, eg. $("form")[0].submit();

返回值
jQuery

示例
说明:
触发注册到表单的所有submit事件，但不提交表单。

jQuery 代码:
$("form").submit();

 

28. submit(fn)
在每一个匹配元素的submit事件中绑定一个处理函数。

Bind a function to the submit event of each matched element.

返回值
jQuery

参数
fn (Function): 在每一个匹配元素的submit事件中绑定的处理函数
示例
说明:
如果输入框中没有输入文本，阻止表单提交。

HTML 代码:
<form id="myform"><input /></form>
 
jQuery 代码:
$("#myform").submit( function() { return $("input", this).val().length > 0; } );

 

29. toggle(even, odd)
每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。 可以使用unbind("click")来删除。

Toggle between two function calls every other click. Whenever a matched element is clicked, the first specified function is fired, when clicked again, the second is fired. All subsequent clicks continue to rotate through the two functions. Use unbind("click") to remove.

返回值
jQuery

参数
even (Function): 第奇数次点击时要执行的函数。
odd (Function): 第偶数次点击时要执行的函数。
示例
jQuery 代码:
$("p").toggle(function(){ $(this).addClass("selected"); },function(){ $(this).removeClass("selected"); });

 

30. trigger(type)
在每一个匹配的元素上触发某类事件。

Trigger a type of event on every matched element.

返回值
jQuery

参数
type (String): 要触发的事件类型
示例
HTML 代码:
<p click="alert('hello')">Hello</p>
 
jQuery 代码:
$("p").trigger("click")
 
结果:
alert('hello')

 

31. unbind(type, fn)
反绑定，从每一个匹配的元素中删除绑定的事件。 如果没有参数，则删除所有绑定的事件。 如果提供了事件类型作为参数，则只删除该类型的绑定事件。 如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

The opposite of bind, removes a bound event from each of the matched elements. Without any arguments, all bound events are removed. If the type is provided, all bound events of that type are removed. If the function that was passed to bind is provided as the second argument, only that specific event handler is removed.

返回值
jQuery

参数
type (String): (可选) 事件类型
fn (Function): (可选) 要从每个匹配元素的事件中反绑定的事件处理函数
示例
HTML 代码:
<p οnclick="alert('Hello');">Hello</p>
 
jQuery 代码:
$("p").unbind()
 
结果:
[ <p>Hello</p> ]
 
--------------------------------------------------------------------------------

 

HTML 代码:
<p οnclick="alert('Hello');">Hello</p>
 
jQuery 代码:
$("p").unbind( "click" )
 
结果:
[ <p>Hello</p> ]
 
--------------------------------------------------------------------------------

 

HTML 代码:
<p οnclick="alert('Hello');">Hello</p>
 
jQuery 代码:
$("p").unbind( "click", function() { alert("Hello"); } )
 
结果:
[ <p>Hello</p> ]

 

32. unload(fn)
在每一个匹配元素的unload事件中绑定一个处理函数。

Bind a function to the unload event of each matched element.

返回值
jQuery

参数
fn (Function): 在每一个匹配元素的unload事件中绑定的处理函数。
示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").unload( function() { alert("Hello"); } );
 
结果:
<p οnunlοad="alert('Hello');">Hello</p>