.bind()
.bind( eventType [, eventData ], handler )
描述：针对元素把一个处理函数附加到某个事件。
- events类型：Object一个对象，它包含了一个或多个DOM事件类型，以及要对它们执行的函数。
自从jQuery 1.7版，.on()方法成了把事件处理函数附加到document的首先方法。对于早前的版本，.binid()方法用来把事件处理函数直接附加到元素上。处理函数附加到jQuery对象中当前选中的元素上，所以在在对.bind()的调用发生的时候，必须已经存在。要想实现更灵活的绑定，请参见.on()或者.delegate()页面中对事件委托的讨论。
任何可用为eventType的字符串都是合法的；如果字符串不是一个原生DOM事件的名称，处理函数会绑定到一个自定义事件上。浏览器不会调用这些事件，但是可以从别的JavaScript代码中，使用.trigger()方法或者.triggerHandler()方法人为触发。
如果eventType字符串包含了一个点.，则该事件就有了命名空间。点字符把事件名与它的命名空间分隔开。举个例子，在调用.bind( "click.name", handler )时，字符串click是事件类型，而字符串name是命名空间。命名空间允许我们解绑或者触发一些事件类型，而不需要影响其它的。参见.unbind()中的讨论以了解更多信息。
有一些用于标准浏览器事件的简写方法，比如说.click()，它们可以用来附加或者触发相应的事件处理函数。要想得到完整的简写方法的列表，参见事件。
如果一个事件抵达了一个元素，所有的绑定到该元素上该事件类型上的处理函数都会被引发。如果已经注册了多个处理函数，则它们会按照它们被绑定的顺序执行。所有的处理函数执行完后，事件继续沿着常规的事件传播路径传播。
一个.bind()的基本用法是：
$( "#foo" ).bind( "click", function() {
alert( "User clicked on 'foo.'" );
});
代码将导致带有ID“foo”的元素响应click事件。当用户在元素范围内点击时，将显示一条提醒。
多个事件
多个事件类型可以一次性绑定，只要在每两个事件名之间用空格隔开：
$( "#foo" ).bind( "mouseenter mouseleave", function() {
$( this ).toggleClass( "entered" );
});
<div id="foo">（它初始时并不还有“entered”样式类）上的该效果是在鼠标进入到<div>的时候添加“entered”样式类，在鼠标离开的时候删除该样式类。
自从jQuery 1.4，我们可以同时绑定多个事件处理函数，只要传出一个事件类型-处理函数对的对象：
$( "#foo" ).bind({
click: function() {
// Do something on click
},
mouseenter: function() {
// Do something on mouseenter
}
});
事件处理函数
handler参数取用了一个回调函数，如上所示。在该处理函数内部，关键词this引用了绑定该处理函数的DOM元素。要想在jQuery中使用该元素，只要把它传递给常规的$()函数就行了。举个例子：
$( "#foo" ).bind( "click", function() {
alert( $( this ).text() );
});
在代码执行之后，当用户在一个还有id为“foo”的元素上点击时，它的文本内容将显示为一个提醒。
自从jQuery 1.4.2，再制事件处理函数可以绑定到一个元素上，而不是被丢弃。如果使用了该事件的data功能，或者当别的独一无二的数据居留在一个闭包中且闭包位于事件处理函数外面，这个功能会很有用。
在jQuery 1.4.3中，你可以在事件处理函数的位置传入false。这将绑定一个等同于function(){ return false; }的事件处理函数。可以在以后删除这个函数，只要调用：.unbind( eventName, false )。
事件对象
回调函数handler也可以取一些参数。在调用函数时，事件对象将传递到第一个参数。
该事件对象通常是不必要的，而且该参数常被省略掉。然而，在需要收集更多关于该事件被初始化时的用户环境信息时候，它会变得十分必要。点此浏览完整的事件对象。
在一个处理函数中返回false等同于在事件对象上调用了.preventDefault()和.stopPropagation()。
使用在一个处理函数上使用事件对象，如下所示：
$( document ).ready(function() {
$( "#foo" ).bind( "click", function( event ) {
alert( "The mouse cursor is at (" +
event.pageX + ", " + event.pageY +
")" );
});
});
注意添加到匿名函数的参数。这些代码将导致在一个带ID“foo”的元素上单击时，报告鼠标指针在网页上的坐标。
传递事件数据
eventData参数是可选的，它不太常用。如果提供了这个参数，它允许你向处理函数传递额外的信息。该参数的一个方便的用法是变通地解决由闭包产生的问题。举个例子，假设我们有两个事件处理函数，都提供了同样的外部变量：
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来传递这条消息：
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()方法的第二个参数；如果没有额外的数据需要发送给处理函数，则callback作为第二个参数也是最后一个参数。
参见.trigger()方法，介绍了一个在事件发生时向处理函数传递数据方法，该方法并不是在事件绑定的时候向处理函数传递数据。
自从jQuery 1.4版，我们不能再把数据（因此，事件）附加到<object>、<embed>或者<applet>元素上，因为当向Java applets附加数据的时候会发生致命的错误。
注意：虽然在下个示例中作了演示，但是不建议把处理函数同时绑定到同一个元素的click事件和dblclick事件上。事件的触发顺序会因浏览器而不同，有些浏览器在dblclick事件之前会接收到两次单击，而另一些浏览器只接收到一次单击。“双击敏感性”（两次单击会被侦测为一次双击的最大间隔时长）也会因操作系统而异、因浏览器而异，而且通常是可用户配置的。
示例
处理对段落文本的点击和双击。注意：该坐标系统是相对于窗口的，在下面的案例中是相对于演示文档的iframe。
<!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>
演示结果
要想在点击每个段落的时候，在一个提示框中显示这个段落中的文本：
$( "p" ).bind( "click", function() {
alert( $( this ).text() );
});
在事件处理函数之前，你可以传递一些额外的数据：
function handler( event ) {
alert( event.data.foo );
}
$( "p" ).bind( "click", {
foo: "bar"
}, handler );
只要返回false，就能取消默认行为，并防止它向上冒泡：
$( "form" ).bind( "submit", function() {
return false;
})
使用.preventDefault()方法可以只取消事件的默认行为：
$( "form" ).bind( "submit", function( event ) {
event.preventDefault();
});
使用.stopPropagation()方法能够阻止事件向上冒泡，但是不阻止事件的默认行为。
$( "form" ).bind( "submit", function( event ) {
event.stopPropagation();
});
绑定自定义事件。
<!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>
演示结果
同时绑定多个事件。
$( "div.test" ).bind({
click: function() {
$( this ).addClass( "active" );
},
mouseenter: function() {
$( this ).addClass( "inside" );
},
mouseleave: function() {
$( this ).removeClass( "inside" );
}
});