【JavaScript基礎】クリック時やマウス操作時に発生するイベントについて

JavaScriptにおける「クリックやマウス操作に合わせて発生するイベント」について、自己の忘備録としてまとめています。

参考URL

参考著書

クリック時の処理をする

要素のクリック時、タップ時にイベントを発生させるためには、clickイベント使用します。

<!-- HTML -->
<button class="btn"></button>

// JS
const btn = document.querySelector('.btn');

btn.addEventListener('click',()=>{
    console.log('ボタンがクリックされました。');
})

マウスを押したときや動かしたときに処理をする

• マウスをクリックしたとき
• マウスを離したとき
• マウスの動かしているとき

の３つのマウス操作イベントに対して処理をする時はそれぞれ下記のイベントを使用します。

イベント名	発生タイミング
mousedown	マウスボタンを押したとき
mouseup	マウスボタンを離したとき
mousemove	マウスを動かしたとき

<!-- HTML -->
<main class="main">
  <div class="target"></div>
</main>

// JS
const targetArea = document.querySelector('.target');

// 対象エリアでマウスボタンを押したら、ログを出力
targetArea.addEventListener('mousedown', () => {
    console.log('マウスボタンを押した。');
});

// 対象エリアでマウスボタンを離したら、ログを出力
targetArea.addEventListener('mouseup', () => {
    console.log('マウスボタンを離した。');
})

// 対象エリア上でマウスを動かしたら、ログを出力
targetArea.addEventListener('mousemove',()=>{
    console.log('マウスを動かした。');
})

マウスオーバー時に処理をする

マウスオーバー時に処理をする場合、

• カーソルが要素上に乗ったとき
• カーソルが要素上から離れたとき

の２パターンがあり、それぞれ下記のイベントを使用します。

イベント名	発生タイミング
mouseenter	カーソルが要素上に乗ったとき
mouseover	カーソルが要素上に乗ったとき（バブリングあり）
mouseleave	カーソルが要素上から離れたとき
mouseout	カーソルが要素上から離れたとき（バブリングあり）

乗ったとき、離れたときそれぞれ２つずつイベントがありますが、それらの違いはバブリングの有無です。

バブリングとは

バブリングとは、ある要素で発生したイベントが親要素や先祖要素に伝わることです。

それ以外の基本的な使い方は同じです。

<!-- HTML -->
<main class="main">
  <div class="target"></div>
</main>

// JS
const targetArea = document.querySelector('.target');

// 要素にカーソルが乗った時
targetArea.addEventListener('mouseenter', () => {
    console.log('要素上にカーソルが乗りました。');
});

// 要素にカーソルが乗った時（バブリングあり）
targetArea.addEventListener('mouseover', () => {
    console.log('要素上にカーソルが乗りました。');
});

// 要素にカーソルが乗った時
targetArea.addEventListener('mouseleave', () => {
    console.log('要素上からカーソルが離れました。');
});

// 要素にカーソルが乗った時（バブリングあり）
targetArea.addEventListener('mouseout', () => {
    console.log('要素上からカーソルが離れました。');
});

マウス操作時の座標を取得する

clickイベントやmousemoveイベントなどのマウス操作イベントが発生した際のイベントは、MouseEventオブジェクトです。MouseEventオブジェクトはイベント発生時の座標情報が含まれており、いくつかのプロパティがあります。

プロパティ	内容	型
event.clientX	ブラウザー左上を基準としたX座標	数値
event.clientY	ブラウザー左上を基準としたY座標	数値
event.offsetX	要素左上を基準としたX座標	数値
event.offsetY	要素左上を基準としたY座標	数値
event.pageX	ページ左上を基準としたX座標	数値
event.pageY	ページ左上を基準としたY座標	数値
event.screenX	デバイス左上を基準としたX座標	数値
event.screenY	デバイス左上を基準としたY座標	数値

clientX・clientY、clientX・clientYは表の内容通りです。

pageX・pageYは、ページスクロール量が加味されます。
screenX・screenYはWebページを見ているデバイス（スマートフォンやパソコン）の左上が基準になります。

<!-- HTML -->
<main class="main">
  <div class="target"></div>
</main>

// JS
const targetArea = document.querySelector('.target');

// ブラウザ左上を基準としたX座標とY座標を出力
targetArea.addEventListener('mousemove',(event) => {
    console.log(event.clientX, event.clientY);
})