jQuery学习笔记之unbind()

jQuery学习笔记之

.unbind()

本文目标

1 了解

.unbind()

的几种调用方式及其参数含义

2 了解通过函数名解绑事件

3 了解利用命名空间解绑事件

学习资料

官方描述文档： http://api.jquery.com/unbind/#unbind-eventType-handler/

中文描述文档： http://www.css88.com/jqapi-1.9/unbind/

建议： 如果时间充裕还是看官方文档

官方描述

Remove a previously-attached event handler from the elements.

移除通过

.bind()

附加到元素上的事件处理过程

官方在1.7+,推荐使用

.on()

和

.off()

为元素附加、移除事件绑定

四种使用方式

1

.unbind( eventType [, handler ] )

version added: 1.0

2

.unbind( eventType, false )

version added: 1.4.3

3

.unbind( event )

version added: 1.0

4

.unbind()

version added: 1.0

eventType

Type: String

A string containing a JavaScript event type, such as click or submit

参数：eventType

参数类型：String

参数说明：一个包含JavaScript事件类型的字符串,例如”click” or “submit”

handler

Type: Function( Event eventObject )

The function that is to be no longer executed.

参数：handler

参数类型：Function

参数说明：不再被执行的函数

false

Type: Boolean

Unbinds the corresponding ‘return false’ function that was bound using .bind( eventType, false ).

参数：false

参数类型：Boolean

参数说明：解绑一个被利用

.bind(eventType,false)

这种方式绑定其效果等效于”return false”的函数

event

Type: Event

A jQuery.Event object

参数：event

参数类型：Event

参数说明：jQuery.Event对象

函数说明

$( "#foo" ).unbind();

这种写法将移除

$("#foo")

元素上的全部利用

.bind()

绑定的事件.我们可以使用事件类型这个参数是解绑事件的范围更加精确,例如：

$( "#foo").unbind( "click" );

By specifying the click event type, only handlers for that event type will be unbound. This approach can still have negative ramifications if other scripts might be attaching behaviors to the same element, however. Robust and extensible applications typically demand the two-
4000
argument

通过指定事件类型,仅这事件类型对应的处理过程将被解除绑定;但这种将带来一些非预期的效果,例如,在程序的其它地方为同一元素的相同事件类型绑定了其它的事件处理过程,这种方式将导致这些处理过程也将被从这个元素上移除.为了避免这个问题,我们可以再增加一个参数

handler

function sayHi(){
alert("Hi");
}
$("#itemNav").find('#a2').bind("click",sayHi);
$("#itemNav").find('#a2').unbind('click', sayHi);

By naming the handler, we can be assured that no other functions are accidentally removed.

通过事件处理过程的名词,我们能够确保其它的处理过程不会被意外的移除.

但下面这种方式将无法达到正常效果:

$("#itemNav").find('#a2').bind("click",function sayHi(){
alert("Hi");
});

$("#itemNav").find('#a2').unbind('click', function sayHi(){
alert("Hi");
});

Even though the two functions are identical in content, they are created separately and so JavaScript is free to keep them as distinct function objects. To unbind a particular handler, we need a reference to that function and not a different one that happens to do the same thing

虽然这两个函数在内容上是相同的,但他们是被单独创建的,JavaScript认为它们是不同的函数对象.对于解绑一个特殊的事件处理过程,我们需要的是这个函数的引用而不是做相同事情的不同函数.

Instead of maintaining references to handlers in order to unbind them, we can namespace the events and use this capability to narrow the scope of our unbinding actions. As shown in the discussion for the .bind() method, namespaces are defined by using a period (.) character when binding a handler:

在解绑事件处理过程时我们可以用事件命名空间来代替对事件处理过程的引用,利用这一特性可以缩小我们解绑事件这一动作的范围.命名空间是利用一个(.)符号在绑定事件处理过程的时候定义的.

$( "#foo" ).bind( "click.myEvents", handler );

When a handler is bound in this fashion, we can still unbind it the normal way

当一个事件处理过程是利用这种方式绑定到元素上时,我们仍然能利用正常的方式去解绑它.

$( "#foo" ).unbind( "click" );

However, if we want to avoid affecting other handlers, we can be more specific

如果我们想避免影响到其它的事件处理过程,我们能够用更具体方式:

$( "#foo" ).unbind( "click.myEvents" );

我们也能够在不考虑事件类型的情况下解绑同一命名空间下的全部事件处理过程:

$( "#foo" ).unbind( ".myEvents" );

It is particularly useful to attach namespaces to event bindings when we are developing plug-ins or otherwise writing code that may interact with other event-handling code in the future.

当我们开发插件或写一些在未来可能与其它事件处理过程相互影响的代码时,对于使用命名空间进行事件绑定是非常有用到.

The third form of the .unbind() method is used when we wish to unbind a handler from within itself

.unbind()

方法的第三种形式

.unbind(event)

是用于当我们希望在一个事件处理过程内部去解绑这个事件处理过程时.

var timesClicked = 0;
$( "#foo" ).bind( "click", function( event ) {
alert( "The quick brown fox jumps over the lazy dog." );
timesClicked++;
if ( timesClicked >= 3 ) {
$( this ).unbind( event );
}
});

The handler in this case must take a parameter, so that we can capture the event object and use it to unbind the handler after the third click. The event object contains the context necessary for .unbind() to know which handler to remove.

在这种情况下,这事件处理过程能够必须提供一个参数,以便我们能够获得事件对象并利用在第三次点击之后去解绑这个事件处理过程.这事件对象包含了

.unbind()

方法了解哪个事件处理过程要被移除所需的上下问环境.

相关Demo

example1

function sayHi(){
alert("Hi");
}

$("#itemNav").find('#a2').bind("mouseenter mouseleave",sayHi);

$("#itemNav").find('#a2').unbind('mouseenter mouseleave',sayHi);

*不解

Note: Using a proxied function to unbind an event on an element will unbind all proxied functions on that element, as the same proxy function is used for all proxied events. To allow unbinding a specific event, use unique class names on the event (e.g. click.proxy1, click.proxy2) when attaching them.

官网中有这样一段话没看明白,若有理解的还望分享一下!