jQuery Events - 滑鼠事件

常用的滑鼠事件介紹及參數設定。

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

小提醒

HTML

<h1>我是標題</h1>

JavaScript

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

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

CSS

h1 {
  background-color: pink;
}

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