.bind()

.bind( eventType [, eventData ], handler )返回类型:jQueryversion deprecated: 3.0

描述:把一个处理函数附加到针对元素的一个事件。

  • 增补版本:1.0.bind( eventType [, eventData ], handler )

    • eventType
      类型:String
      一个字符串,包含了一个或多个DOM事件类型,譬如“click”或“submit”或自定义事件名称。
    • eventData
      类型:Anything
      一个对象,包含要传递给事件处理函数的数据。
    • handler
      类型:Function( Event eventObject )
      每次触发事件时要执行的函数。
  • 增补版本:1.4.3.bind( eventType [, eventData ] [, preventBubble ] )

    • eventType
      类型:String
      一个字符串,包含了一个或多个DOM事件类型,譬如“click”或“submit”或自定义事件名称。
    • eventData
      类型:Anything
      一个对象,包含要传递给事件处理函数的数据。
    • preventBubble
      类型:Boolean
      把第三个参数设置为false,将附加一个函数,以防止默认行为发生,并停止事件冒泡。默认值是true。
  • 增补版本:1.4.bind( events )

    • events
      类型:Object
      一个对象,包含了一个或多个DOM事件类型,以及针对它们执行的函数。

从jQuery 3.0开始,.bind()已经被淘汰了。自从jQuery 1.7以来,它被.on()方法取代了,以附加事件处理函数,所以不鼓励使用它。对于早期版本,.bind()方法用来直接对元素附加事件处理函数。处理函数被附加到jQuery对象中当前选中的元素上,所以在调用.bind()发生时,那些元素必须已经存在。欲进一步了解弹性事件绑定,请参阅.on()中关于事件派遣的讨论。

任何字符串对eventType都是合法的;如果字符串不是一个原生DOM事件名称,则处理函数会被绑定到自定义事件。浏览器永远不会调用这些事件,但是可以从别的JavaScript代码中使用.trigger.triggerHendler()方法来手工触发它。

如果eventType字符串包含了一个点字符(.),则事件是有命名空间的。点字符把事件与它的命名空间分隔开了。例如,在调用.bind( "click.name", handler )时,字符串click是事件类型,而字符串name是命名空间。命名空间允许我们解绑一些事件或触发一些事件,而不影响其它的。欲进一步了解,请参阅关于.unbind()的讨论。

有一些针对标准浏览器事件的简写方法,譬如.click(),它们可以用来附加事件处理函数或触发事件处理函数。欲得简写方法的完整列表,请参阅事件类别

当事件接触到一个对象时,所有的针对该元素绑定到那个事件类型的处理函数都被引发了。如果已经注册了多个处理函数,在执行了所有处理函数之后,事件继续沿着常规事件传播路径传播。

.bind()的基本用法是:

1
2
3
$( "#foo" ).bind( "click", function() {
alert( "User clicked on 'foo.'" );
});

代码将导致带有ID为“foo”的元素响应click事件。当用户在元素内部点击时,会显示警告框。

多个事件

多种事件类型可以一次性绑定,只要把各个事件类型用空格隔开:

1
2
3
$( "#foo" ).bind( "mouseenter mouseleave", function() {
$( this ).toggleClass( "entered" );
});

<div id="foo">上的这个效果(它并非一开始就具有“entered”类)是当鼠标进入<div>添加“entered”类,当鼠标离开时删除类。

自从jQuery 1.4以来,我们可以通过传入事件类型、处理函数对的对象来同步绑定多个事件处理函数。

1
2
3
4
5
6
7
8
$( "#foo" ).bind({
click: function() {
// Do something on click
},
mouseenter: function() {
// Do something on mouseenter
}
});

事件处理函数

handler参数取用一个回调函数,如上面的示。在回调函数内部,关键字this指的是DOM处理函数所绑定的元素。若要在jQuery中使用该元素,只要把它传递给常规的$()函数。例如:

1
2
3
$( "#foo" ).bind( "click", function() {
alert( $( this ).text() );
});

执行此代码之后,当用户在带有ID为“foo”的元素内部点击时,它的文本内容将被显示为警告。

自从jQuery 1.4.2,可以把重复的事件处理函数绑定到一个元素上,而不是被丢弃。当用了事件数据功能时,或者当别的独一无二的数据驻留在围绑着事件处理函数的闭包内部时,这很有用。

在jQuery 1.4.3中,你可以传入false代替事件处理函数。这将绑定一个等同于function(){ return false; }的事件处理函数。之后可以通过调用.unbind( eventName, false )来删除此函数。

事件对象

handler回调函数也可以取用参数。当调用函数时,事件对象将被传递给第一个参数。

事件对象通常是不必要的,参数也会被省略,因为当处理函数被触发时,我们可以通过上下文来取得足够的信息,完成我们需要的操作。然而,有时候,当事件初始化完成时,我们需要收集更多的关于用户环境的信息时,我们就需要使用该参数了。查看所有事件对象

从处理函数返回false,等同于在事件对象上调用.preventDefault().stopPropagation()

在处理函数中使用事件对象,如下所示:

1
2
3
4
5
6
7
$( document ).ready(function() {
$( "#foo" ).bind( "click", function( event ) {
alert( "The mouse cursor is at (" +
event.pageX + ", " + event.pageY +
")" );
});
});

请注意,参数添加到匿名函数。此代码将导致在带ID“foo”的元素上的点击一次,就报告点击时鼠标指针的网页坐标。

传递事件数据

可选的eventData参数并不常用。如果提供了它,此参数允许我们把额外的信息传递给处理函数。此参数的一个趁手的作法是绕过闭包产生的问题。例如,假设我们具有两个事件处理函数,都引用相同的外部变量:

1
2
3
4
5
6
7
8
var message = "Spoon!";
$( "#foo" ).bind( "click", function() {
alert( message );
});
message = "Not in the face!";
$( "#bar" ).bind( "click", function() {
alert( message );
});

因为处理函数是闭包,它们的环境中都有message,在触发时都将显示消息Not in the face!。变量的值已经变了。若要避免这个问题,我们可以利用eventData传递消息:

1
2
3
4
5
6
7
8
9
10
11
12
var message = "Spoon!";
$( "#foo" ).bind( "click", {
msg: message
}, function( event ) {
alert( event.data.msg );
});
message = "Not in the face!";
$( "#bar" ).bind( "click", {
msg: message
}, function( event ) {
alert( event.data.msg );
});

此时处理函数内部并没有直接引用该变量;而是通过eventData按值传递变量,它固定了绑定事件时变量的值。第一个处理函数现在将显示Spoon!,与此同时第二个将弹出警告Not in the face!

请注意,对象是按引用传递给函数的,它进一步使这种情况复杂化。

如果存在eventData,它是.bind()方法的第二个参数;如果没有额外的数据需要发送给处理函数,则回调函数传递作第二个参数兼最后一个参数。

请参阅.trigger()方法的参考以了解在事件发生的时候把数据传递给处理函数,而不是在绑定处理函数时把数据传递给处理函数。

从jQuery 1.4以来,我们不再把数据(以及事件)附加给object元素、embed元素或者applet元素,因为在把数据附加给Java applets时,糟糕的错误不断发生。

注意:虽然在下一个示例中有演示,但是把处理函数绑定到同一元素的click事件和dblclick事件上并不可取。在不同的浏览器中,事件触发的次序各不相同,有些浏览器会在dblclick事件之前接收到两次单击事件,而有些浏览器只能接收到一次单击事件。在不同的操作系统和不同的浏览器中,双击敏感性(被侦测为一次双击的两次单击之间相隔的最大时间)可能千差万别。

示例:

针对段落处理点击和双击事件。注意:坐标是相对于窗口的,所以在此情况下,是相对于演示框架:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>bind demo</title>
<style>
p {
background: yellow;
font-weight: bold;
cursor: pointer;
padding: 5px;
}
p.over {
background: #ccc;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Click or double click here.</p>
<span></span>
<script>
$( "p" ).bind( "click", function( event ) {
var str = "( " + event.pageX + ", " + event.pageY + " )";
$( "span" ).text( "Click happened! " + str );
});
$( "p" ).bind( "dblclick", function() {
$( "span" ).text( "Double-click happened in " + this.nodeName );
});
$( "p" ).bind( "mouseenter mouseleave", function( event ) {
$( this ).toggleClass( "over" );
});
</script>
</body>
</html>

演示:

每当点击段落时,在警告框中显示每个段落的文本。

1
2
3
$( "p" ).bind( "click", function() {
alert( $( this ).text() );
});

在事件处理函数之前,你可以传递一些外加的数据。

1
2
3
4
5
6
function handler( event ) {
alert( event.data.foo );
}
$( "p" ).bind( "click", {
foo: "bar"
}, handler );

通过返回false,撤消默认操作并阻止它向上冒泡。

1
2
3
$( "form" ).bind( "submit", function() {
return false;
})

利用.preventDefault()方法,撤消默认操作。

1
2
3
$( "form" ).bind( "submit", function( event ) {
event.preventDefault();
});

利用.stopPropagation()方法,阻止事件冒泡,但是不阻止默认动用。

1
2
3
$( "form" ).bind( "submit", function( event ) {
event.stopPropagation();
});

绑定自定义事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>bind demo</title>
<style>
p {
color: red;
}
span {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display: none;"></span>
<script>
$( "p" ).bind( "myCustomEvent", function( e, myName, myValue ) {
$( this ).text( myName + ", hi there!" );
$( "span" )
.stop()
.css( "opacity", 1 )
.text( "myName = " + myName )
.fadeIn( 30 )
.fadeOut( 1000 );
});
$( "button" ).click(function() {
$( "p" ).trigger( "myCustomEvent", [ "John" ] );
});
</script>
</body>
</html>

演示:

同步绑定多个事件。

1
2
3
4
5
6
7
8
9
10
11
$( "div.test" ).bind({
click: function() {
$( this ).addClass( "active" );
},
mouseenter: function() {
$( this ).addClass( "inside" );
},
mouseleave: function() {
$( this ).removeClass( "inside" );
}
});