jQuery 事件处理(Events)(上)

jQuery 的事件處理函式大都提供兩種用途，一種是呼叫帶有參數的函式 - 綁定事件處理函式；另一種則是呼叫不帶有參數的函式 - 觸發該事件。

帶有參數，例如，綁定所有段落觸發 click 事件時，將背景顏色改為藍色：

$('p').click(function() {
  $(this).css('background-color', 'blue');
});

 不帶有參數，例如，觸發所有段落的 click 事件：

$('p').click();

事件處理函數中的 this 為被觸發的「DOM元素」，而非 jQuery 物件。

上述的程式碼，我們用到 jQuery 定義好的 click 函式來處理 click event，然而 jQuery 也同樣對 DOM 其它的 event 都有相關的函式，如以下的 jQuery 事件函式也是同樣的使用方法：

jQuery 的 event object

對於所有的 jQuery event handler，你都能傳入一個參數作為 event 物件，如下例：

$(document).click(function(event) {
  alert(event.pageX);
});

 上面這個例子是用來取得滑鼠游標相對於頁面的位置，重點是！這段程式碼在IE上也能執行 (註：原本的 IE 瀏覽器事件無 pageX 屬性)。Why? 因為 jQuery 又事先幫你解決掉事件處理中跨瀏覽器的問題了 - 「jQuery 修改了 event object 以使其符合 W3C 的標準」，所以從此你不用再重複 if (window.event)，你只需了解並使用標準的事件屬性！

jQuery 的事件綁定處理函式

.hover(handlerIn, handlerOut)

$(selector).hover(handlerIn, handlerOut) 其實是

$(selector).mouseenter(handlerIn).mouseleave(handlerOut); 的簡化版。

當滑鼠移動到一個匹配的元素上面時，會觸發第一個函數 (handlerIn)；當滑鼠移出該元素時，會觸發第二個函數 (handlerOut)。

例如，滑鼠移進 li 元素時，在後面加上 ***，移出時再刪掉：

$('li').hover(
  function() {
    $(this).append($('<span> ***</span>'));
  }, function() {
    $(this).find('span:last').remove();
  }
);

 .bind(eventType, handler) unbind(eventType)

除了直接用特定的事件函式來綁定事件 (i.e. .click())，你也可以用 .bind() 來做。

例如，滑鼠點 foo 元素時跳出 alert 訊息：

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

 .unbind() 用來移除事件處理函式，例如：

// 移除 foo 元素上所有綁定的事件處理函式
$('#foo').unbind();
// 只移除 foo 元素上所有綁定的 click 事件處理函式
$('#foo').unbind('click');

// 只移除特定事件的特定處理函式
var handler = function() { alert('hi'); };
$('#foo').bind('click', handler);
$('#foo').unbind('click', handler);

 bind 及 unbind 還可以讓我們達到 自訂事件處理 的功能：

$('#foo').bind('myEvent', doSomething);

 如上，我們自訂一個叫作 myEvent 的事件，但這不是 DOM 標準事件啊，怎麼觸發它？答案是用接著會談到的 "trigger" 函式來觸發 myEvent。

.trigger(eventType [, extraParameters])

觸發事件，其中 extraParameters 為要傳給事件處理函式的參數 (一個陣列或物件)。

例如，觸發上面的自訂 myEvent 事件：

$('#foo').trigger('myEvent');

 當然也可以用來觸發一般事件：

$('#foo').trigger('click');

 .one(events, handler)

如果只是觸發 "一次" 事件，就使用 one 函式來作 bind 的動作，當該事件被觸發一次之後就會自己自動 unbind。

$('#foo').one('click', function() {
  alert('This will be displayed only once.');
});