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