.bind()方法是將一個(gè)文件綁定行為的主要方法。所有JavaScript的事件類型，比如focus, mouseover, 和 resize被允許設(shè)置為eventType參數(shù)（beforeunload和error的事件對window對象的使用非標(biāo)準(zhǔn)約定和不被jQuery支持;直接用來代替為window對象綁定一個(gè)處理程序。）。

jQuery庫提供了標(biāo)準(zhǔn)的事件類型綁定快捷方法,比如.bind('click')的快捷方法.click()。每一個(gè)描述中可以找到它的快捷方式：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error。

對于eventType任何字符串是合法的;如果該字符串不是一個(gè)原生的JavaScript事件名稱，那么以自定義事件方式綁定處理程序。這些事件是不會(huì)被瀏覽器調(diào)用，但可以通過其他JavaScript代碼使用.trigger()或.triggerHandler() 來手動(dòng)觸發(fā)。

如果eventType參數(shù)字符串包含一個(gè)點(diǎn)（ . ）字符，那么該事件被命名空間。這個(gè)點(diǎn)（ . ）字符從它的命名空間分隔出的事件。例如，在調(diào)用.bind('click.name', handler) ，字符串click是事件類型，而字符串name是命名空間。命名空間可以讓我們解除或綁定一些事件，而不會(huì)影響他人。見.unbind()獲取更多信息。

當(dāng)事件到達(dá)一個(gè)元素，綁定到該元素的類型的所有事件處理程序被執(zhí)行。如果有多個(gè)處理程序登記，他們將永遠(yuǎn)在其中按固定的次序執(zhí)行。所有處理程序執(zhí)行完成后，事件繼續(xù)沿著正常的事件傳播路徑。

.bind()一個(gè)基本的用法：

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

此代碼將使元素ID為foo響應(yīng)click事件。當(dāng)在用戶點(diǎn)擊這個(gè)元素之后，警報(bào)將顯示。

Multiple Events

多個(gè)事件類型可以通過用空格隔開一次性綁定：

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

在<div id="foo">（當(dāng)最初它不會(huì)有"entered"樣式類時(shí)）上的這個(gè)效果是當(dāng)鼠標(biāo)進(jìn)入<div>時(shí)增加"entered"樣式類，鼠標(biāo)離開時(shí)移除這個(gè)樣式類。

在jQuery 1.4中，我們可以通過傳遞一個(gè)事件類型/處理函數(shù)的數(shù)據(jù)映射來綁定多個(gè)事件處理程序：

$('#foo').bind({
  click: function() {
    // do something on click
  },
  mouseenter: function() {
    // do something on mouseenter
  }
});

Event Handlers

handler的參數(shù)需要一個(gè)回調(diào)函數(shù)，如上所述。在處理函數(shù)中，關(guān)鍵字this指的是DOM元素受處理程序的約束。為了該元素在jQuery中使用，它可以通過正常的$()函數(shù)。例如：

$('#foo').bind('click', function() {
  alert($(this).text());
});

執(zhí)行此代碼后，當(dāng)用戶點(diǎn)擊里面ID為foo的元素 ，它的文本內(nèi)容將被顯示為警告。

在jQuery 1.4.2中，重復(fù)的事件處理程序可以綁定到一個(gè)元素，而不是被丟棄。例如：

function test(){ alert("Hello"); }
$("button").click( test );
$("button").click( test );

上述按鈕被點(diǎn)擊時(shí)會(huì)產(chǎn)生兩個(gè)警報(bào)。

在jQuery 1.4.3中，你現(xiàn)在可以通過在事件處理程序的地方使用'false'參數(shù)。這將綁定的事件處理程序的等價(jià)于： function(){ return false; }。此功能通過.unbind( eventName, false )可去除在以后調(diào)用 。

The Event object

在handler回調(diào)函數(shù)里還可以帶參數(shù)。當(dāng)函數(shù)被調(diào)用時(shí)，JavaScript事件對象（event）將作為第一個(gè)參數(shù)被傳遞。

事件對象往往是不必要的可以省略的參數(shù)，因?yàn)橥ǔＧ闆r下提供足夠的處理程序時(shí)必然要確切地知道需要做什么處理程序時(shí)被觸發(fā)。然而，有時(shí)就有必要收集更多有關(guān)用戶在事件被啟動(dòng)時(shí)環(huán)境信息。查看所有的事件對象。

從一個(gè)處理函數(shù)返回false等效于調(diào)用事件對象中的兩個(gè).preventDefault()和.stopPropagation()。

Using the event object in a handler looks like this:

$(document).ready(function() {
  $('#foo').bind('click', function(event) {
    alert('The mouse cursor is at ('
      + event.pageX + ', ' + event.pageY + ')');
  });
});

請注意，參數(shù)添加到匿名函數(shù)。此代碼將使 在點(diǎn)擊ID為foo的元素的時(shí)候 alert光標(biāo)在頁面上的坐標(biāo)位置。

Passing Event Data

可選的eventData參數(shù)不常用。當(dāng)提供時(shí)，這種參數(shù)允許我們給處理函數(shù)傳遞額外的信息。一個(gè)方便的使用這個(gè)參數(shù)來解決由于關(guān)閉造成的問題。例如，假設(shè)我們有兩個(gè)事件處理函數(shù)都引用了相同的外部變量：

var message = 'Spoon!';
$('#foo').bind('click', function() {
  alert(message);
});
message = 'Not in the face!';
$('#bar').bind('click', function() {
  alert(message);
});

由于處理函數(shù)已經(jīng)關(guān)閉，兩個(gè)處理函數(shù)都有message在自己的環(huán)境，觸發(fā)時(shí)兩個(gè)都將顯示的信息Not in the face!。為了回避這個(gè)問題，我們可以通過使用eventData參數(shù)中的消息 ：

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);
});

這一次該變量沒有提供給處理函數(shù);相反，變量通過值傳遞給eventData ，修復(fù)了該事件中的值。 第一個(gè)處理程序，現(xiàn)在將顯示Spoon!而第二個(gè)會(huì)提醒Not in the face!。

請注意，對象是通過參數(shù)傳遞給函數(shù)的，這種情況進(jìn)一步復(fù)雜化。

如果eventData參數(shù)存在，這是第二個(gè)傳遞給.bind()的參數(shù);如果沒有更多的數(shù)據(jù)需要發(fā)送到處理程序，然后回調(diào)函數(shù)傳遞作為第二個(gè)和最后一個(gè)參數(shù)。

見.trigger()方法參考將數(shù)據(jù)傳遞到處理函數(shù)，在事件發(fā)生的時(shí)間而不是在處理程序的結(jié)束。

As of jQuery 1.4 we can no longer attach data (and thus, events) to object, embed, or applet elements because critical errors occur when attaching data to Java applets.

<!DOCTYPE html>
<html>
<head>
  <style>
p { background:yellow; font-weight:bold; cursor:pointer; 
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-latest.min.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)

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

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

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

<!DOCTYPE html>
<html>
<head>
  <style>
p { color:red; }
span { color:blue; }
</style>
  <script src="http://code.jquery.com/jquery-latest.min.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");
  }
});