jQuery 滑鼠事件：click、mouseenter、mouseleave 與 hover

常用的 滑鼠事件 介紹及參數設定。這四個方法幾乎涵蓋了網頁上大部分的滑鼠互動需求。

click()

指定 DOM 於滑鼠左鍵放開時觸發。

// 即將棄用
click(handler);

// 改用
on('click', handler);

小提醒

此事件是網頁上極為常用的方法，其動作為 按下滑鼠左鍵並放開 ，Away 都稱為 放開 事件，不會稱做 點擊 事件。因為此事件觸發的條件為 左鍵放開 才會成立，並不是按下後才成立的事件。當然，也是有左鍵按下後的事件類型，各位有興趣可以自行去查查看。

參數

可使用 匿名函式 、具名函式 來進行欲執行的事項（陳述式）。對於 匿名、具名函式 有些陌生的讀者可以看這一篇。

至於陳述式的內容可以暫時先用 那就先來個輸出吧！ 來測試一下！

功能	說明	型別	範例	備註
handler	執行事項	Function	function() {}	必填

範例

HTML

<h1>我是標題</h1>

JavaScript

$('h1').on('click', function () {
  console.log('Hello jQuery!');
});

CSS

h1 {
  background-color: pink;
}

改寫成具名函式

同一段邏輯若要重複使用，就把它抽成具名函式再傳進去。

function clickHandler() {
  console.log('Hello jQuery!');
}

$('h1').on('click', clickHandler);

mouseenter()

當滑鼠進入指定 DOM 的範圍觸發，沒有 事件流 的狀況。

// 即將棄用
mouseenter(handler);

// 改用
on('mouseenter', handler);

參數

與前述相同。

範例

HTML

<h1>我是標題</h1>

JavaScript

$('h1').on('mouseenter', function () {
  console.log('MouseEnter');
});

CSS

h1 {
  background-color: pink;
}

mouseleave()

當滑鼠離開指定 DOM 的範圍觸發，沒有 事件流 的狀況。

// 即將棄用
mouseleave(handler);

// 改用
on('mouseleave', handler);

參數

與前述相同。

範例

HTML

<h1>我是標題</h1>

JavaScript

$('h1').on('mouseleave', function () {
  console.log('MouseLeave');
});

CSS

h1 {
  background-color: pink;
}

hover()

此方法為 jQuery 包裝過的方法，將前述的 mouseenter() 與 mouseleave() 兩個方法包裝在一起。

// 即將棄用
hover(handlerIn, handlerOut);

// 改用
on('mouseenter', handlerIn).on('mouseleave', handlerOut);

參數

與前述相同。但由於此方法為前述的兩個方法所包裝而成，因此參數為兩個函式。

功能	說明	型別	範例	備註
handlerIn	滑鼠進入 DOM 範圍要執行的事項	Function	function() {}	必填
handlerOut	滑鼠離開 DOM 範圍要執行的事項	Function	function() {}	必填

範例

這裡也順便示範了 鏈式操作 ，兩個事件接在同一次選取後面。

HTML

<h1>我是標題</h1>

JavaScript

$('h1')
  .on('mouseenter', function () {
    console.log('MouseEnter');
  })
  .on('mouseleave', function () {
    console.log('MouseLeave');
  });

CSS

h1 {
  background-color: pink;
}

常見問題

click 事件是按下就觸發嗎？

不是。它的成立條件是按下滑鼠左鍵 之後放開 ，因此嚴格說起來是放開事件。若要在按下的當下就反應，應該監聽 mousedown。

匿名函式和具名函式哪個好？

只用一次、內容簡短的處理函式寫成匿名函式最直覺；若同一段邏輯要重複使用，或之後可能需要解除監聽，就該寫成 具名函式 。

mouseenter 和 mouseleave 為什麼不會受事件流影響？

這兩個事件不會冒泡，只在滑鼠真正跨越該元素邊界時各觸發一次，因此在子元素之間移動並不會重複觸發。相關概念請見 事件傳播 。

hover 為什麼要傳兩個函式？

hover() 是 jQuery 把 mouseenter 與 mouseleave 包在一起的捷徑，第一個函式對應滑鼠進入、第二個對應滑鼠離開，所以必須成對提供。

為什麼範例都改寫成 on 的寫法？

click()、mouseenter()、hover() 這些捷徑方法已被標記為即將棄用，官方建議一律改用 on()。寫法統一之後，之後要換成事件委派也不必再改結構。

延伸閱讀

jQuery Events - 瀏覽器事件jQuery 事件方法總覽函式的定義方式事件傳播

參考資料：jQuery API：Mouse Events