【Javascript】マウスイベントの使い方【コピペで動きます】

今回の記事は、

  • マウスイベントって何?
  • マウスイベントってどうやって使うの?
  • マウスイベントを一覧で見たい

というお悩みをお持ちの方に向けた記事になっています。

昨今、UIのリッチ化の波に乗り、多くのWebサイトでこの「マウスイベント」を使った仕組みが実装されています。

この「マウスイベント」を使った開発は今後もより一層活発になっていくことが見込まれますので、ぜひこの機会にマスターしておきましょう。

この記事の前半では「マウスイベント」の概要や使い方について解説しつつ、後半ではコピペで使えるような具体的な実装例をご紹介していきます。


JavaScriptを学び直すなら最新の第7版がおすすめ


2022年ITエンジニア大賞を受賞した話題本



マウスイベントとは?

マウスイベント」とは、「マウスを使った動作」のことを指し、Javascriptではそれらの動作をトリガーとして、ブラウザ側で実行したい内容を定義することができます。
(※ここでの「マウス」とは、物理的な「マウス」のみならず、ノートパソコンなどの「タッチパッド」も指します。)

例えば、「マウスポインタがボタンの上に乗った時にメッセージを表示する」や「マウスボタンが押された時にアニメーションを流し始める」などの動きを実装することができます。
(※「マウスポインタ」とは、マウスを動かすと連動して動いてくれる矢印のことです。)

ふと思い返してみれば、似たような動きが実装されているWebサイトが思い出されるのではないでしょうか?

このような動きを実装するために覚えておくべきマウスイベントは主に以下の8種類です。

  • 1. click
  • 2. dblclick
  • 3. mousedown
  • 4. mouseup
  • 5. mouseover
  • 6. mouseout
  • 7. mousemove
  • 8. mousewheel

個別のイベントの解説の前に、まずはJavascript側にイベントを登録する方法を見ていきましょう。

Javascript側にイベントを登録する方法

ここでご説明するのは、Javascript側に「〇〇というイベントが発生したらXXという処理をしてね」とプログラムする方法です。

その方法としては、以下の3種類を覚えておいてください。

  • 1. HTML要素に直接定義する
  • 2. イベントプロパティを使用する
  • 3. イベントリスナーを使用する

Javascript側にイベントを登録する方法その1 HTML要素に直接定義する

まずは、「HTML要素に直接定義する」方法を見ていきましょう。

HTML要素には、id属性やclass属性などが存在していますが、その中には「イベント属性」も存在しており、この「イベント属性」を利用することで、Javascript側にイベントを登録することができます。

具体的な実装方法(コード)は以下の通りです。

<p>ボタンを押してみましょう</p>

<button onClick="console.log('ボタンがクリックされました!')">このボタンを押してください</button>

上記のコードを実際の画面で見てみると、ボタンを押す度にディベロッパーツールのconsole画面に『ボタンがクリックされました!』という文章が表示されているのがお分かりいただけるかと思います。

ボタンを押してみましょう

このように、登録したいイベントの前にonを付けることで、そのHTML要素のイベント属性を設定することができ、そうすることでJavascript側にイベントを登録することができます。

Javascript側にイベントを登録する方法その2 イベントプロパティを使用する

続いては、「イベントプロパティを使用する」方法を見ていきましょう。

具体的な実装方法(コード)は以下の通りです。

<p>ボタンを押してみましょう</p>

<button id="button1">このボタンを押してください</button>

<script>
function clickedMessage1() {
  console.log("ボタンがクリックされました!")
}

let button1 = document.getElementById("button1")

button1.onclick = clickedMessage1
</script>

上記のコードを実際の画面で見てみると、先ほどと同様に、ボタンを押す度にディベロッパーツールのconsole画面に『ボタンがクリックされました!』という文章が表示されているのがお分かりいただけるかと思います。

ボタンを押してみましょう

このように、id属性やclass属性を使用して取得したHTML要素のイベントプロパティを利用することで、Javascript側にイベントを登録することができます。

なお、id属性やclass属性を使用してHTML要素を取得する方法についてはそれぞれ以下の記事にて解説していますので、ぜひこちらもご覧くださいね。

id属性から取得する場合

おすすめ記事

今回は、Javascriptでid属性を使ってHTML要素を取得する方法をご紹介していきます。 Javascriptの主な役割の一つとして「DOM操作」が挙げられますが、そのDOM操作のためにはまず操作対象であるHTML要素を取得し[…]

プログラミングイメージ

class属性から取得する場合

おすすめ記事

みなさんこんにちは! 今回の記事は、 悩みを抱えた人 ・JavaScriptを使ってHTML要素を取得したい!・getElementsByClassName()メソッドの使い方が知りたい!・getElementsByClass[…]

【JavaScript】getElementsByClassName()でclass名からHTML要素を取得する

Javascript側にイベントを登録する方法その3 イベントリスナーを使用する

最後にご紹介するのは、「イベントリスナーを使用する」方法です。

具体的な実装方法(コード)は以下の通りです。

<p>ボタンを押してみましょう</p>

<button id="button2">このボタンを押してください</button>

<script>
function clickedMessage2() {
  console.log("ボタンがクリックされました!")
}

let button2 = document.getElementById("button2")

button2.addEventListener("click", clickedMessage2)
</script>

上記のコードを実際の画面で見てみると、こちらも、ボタンを押す度にディベロッパーツールのconsole画面に『ボタンがクリックされました!』という文章が表示されているのがお分かりいただけるかと思います。

ボタンを押してみましょう

ここまでご紹介した3種類のうち、実際の開発での使用頻度が高いものは最初(「HTML要素に直接定義する」)と最後(「イベントリスナーを使用する」)の方法になっており、2番目の方法(「イベントプロパティを使用する」)はあまり見かけることはない印象です。

今回の記事では、最初の方法(「HTML要素に直接定義する」)に統一して解説していきますね。

Javascriptでのマウスイベントの実装例

それでは、ここからは実際の動きも交えながら、マウスイベントの実装方法を見ていきましょう。

Javascriptでのマウスイベントの実装例その1 click

最初にご紹介するのは、「click」イベントです。

clickイベントはその名の通り、HTML要素がクリックされた際に発行されるイベントです。

実装コード

<p id="test-tag1">ボタンを押してみましょう</p>

<button onClick="clickButton()">このボタンを押してください</button>

<script>
let count = 0
const testTag1 = document.getElementById("test-tag1")

function clickButton() {
  count += 1
  testTag1.innerHTML = `${count}回押されました!`
}
</script>

動作確認用

ボタンを押してみましょう

この例では、ボタンをクリックする度に、そのクリック回数を踏まえた文章を表示するよう実装しています。

このうち、innerHTMLは指定したタグのテキストを書き換えるための関数で、`${}`変数(count)と通常の文章を組み合わせるための仕組み(テンプレートリテラル)です。

詳しい処理の流れは以下の通りになります。

1. ボタンをクリック
2. pushButton()関数が作動
3. 変数countが1ずつ増加する(count += 1)
4. pタグ内の文章が書き換えられる

Javascriptでのマウスイベントの実装例その2 dblclick

続いてご紹介するのは、「dblclick」イベントです。

dblclickイベントは、HTML要素がダブルクリックされた際に発行されるイベントです。

実装コード

<p id="test-tag2">ボタンを押してみましょう</p>

<button ondblclick="dblClickButton()"></button>

<script>
let dblClickCount = 0
const testTag2 = document.getElementById("test-tag2")

function dblClickButton() {
  dblClickCount += 1
  testTag2.innerHTML = `${dblClickCount}回ダブルクリックされました!`
}
</script>

動作確認用

ボタンを押してみましょう

先ほどのclickイベントと同様の処理を実装しましたので、通常のクリックでは何も起こらず、ダブルクリックの場合のみ数が増えていくことを確認してみてください。

Javascriptでのマウスイベントの実装例その3 mousedown

続いてご紹介するのは、「mousedown」イベントです。

mousedownイベントは、HTML要素がクリックされた際に発行されるイベントです。

先ほどのclickイベントもHTML要素がクリック際に発行されるイベントでしたが、実際には両者には微妙な違いがあります

このmousedownイベントは、クリックされた瞬間に発行されるのですが、clickイベントは厳密に言うと「クリックしている指がマウスから離れた瞬間」に発行されます。

文章だけではわかりづらいと思いますので、具体例を見ながら確認していきましょう。

実装コード

<div id="test-container1">
<p>ボタンを押してみましょう</p>

<button onmousedown="mouseDown1()" onClick="click1()">このボタンを押してください</button>
</div>

<script>
const testContainer1 = document.getElementById("test-container1")

function mouseDown1() {
  let p = document.createElement("p")
  p.textContent("mousedownイベントが発行されました。")
  testContainer1.appendChild(p)
}

function click() {
  let p = document.createElement("p")
  p.textContent("clickイベントが発行されました。")
  testContainer1.appendChild(p)
}
</script>

動作確認用

ボタンを押してみましょう

上記の例において、ボタンをクリックすると、「mousedownイベントが発行されました。」→「clickイベントが発行されました。」の順に文章が表示されると思います。

次に、ボタンをクリックして、そのクリックした指を戻さない(押し続ける)とどうでしょうか?

「mousedownイベントが発行されました。」という文章のみが表示され、そのクリックしている指を離すと「clickイベントが発行されました。」という文章が表示されるかと思います。

このように、mousedownイベントがクリックされた直後に発行されるのに対し、clickイベントは「クリックしている指がマウスから離れた瞬間」に発行されます。

Webサイトの開発ではそこまで気を付ける必要はありませんが、ゲームなどを開発する際、クリックの即時性が求められる場合には、このmousedownイベントを使うようにしましょう。

Javascriptでのマウスイベントの実装例その4 mouseup

続いてご紹介するのは、「mouseup」イベントです。

mouseupイベントは、HTML要素がクリックされた後、そのクリックが離された際に発行されるイベントです。

先ほどのclickイベントも同様にクリックが離された際に発行されるイベントでしたが、こちらのmouseupイベントの方が先に発行されます。

mousedownイベントも併せて、具体例を見ながらその順序を確認していきましょう。

実装コード

<div id="test-container2">
<p>ボタンを押してみましょう</p>

<button onmousedown="mouseDown2()" onmouseup="mouseUp2()" onClick="click2()">このボタンを押してください</button>
</div>

<script>
const testContainer2 = document.getElementById("test-container2")

function mouseDown2() {
  let p = document.createElement("p")
  p.textContent("mousedownイベントが発行されました。")
  testContainer1.appendChild(p)
}

function mouseUp2() {
  let p = document.createElement("p")
  p.textContent("mouseupイベントが発行されました。")
  testContainer1.appendChild(p)
}

function click2() {
  let p = document.createElement("p")
  p.textContent("clickイベントが発行されました。")
  testContainer1.appendChild(p)
}
</script>

動作確認用

ボタンを押してみましょう

このように、「mousedown」→「mouseup」→「click」の順にイベントが発行されているのがお分かりいただけるかと思います。

Javascriptでのマウスイベントの実装例その5 mouseover

続いてご紹介するのは、「mouseover」イベントです。

mouseoverイベントは、HTML要素上にマウスが乗った際に発行されるイベントです。

実装コード

<button id="button3" onmouseover="mouseOver1()" onmouseout="mouseOut1()">ここにマウスを当ててみてください</button>

<script>
let button3 = document.getElementById("button3")

function mouseOver() {
  button3.innerHTML = "マウスが当たりました!"
}

function mouseOut() {
  button3.innerHTML = "ここにマウスを当ててみてください"
}
</script>

動作確認用

  

このように、ボタン上にマウスが乗った場合にイベントが発行されているのがお分かりいただけるかと思います。

Javascriptでのマウスイベントの実装例その6 mouseout

続いてご紹介するのは、「mouseout」イベントです。

mouseoutイベントは、HTML要素からマウスが離れた際に発行されるイベントです。
(※お気付きの方もいらっしゃるかと思いますが、先ほどのmouseoverイベントの実装例でもmouseoutイベントを使用していました。)

実装コード

<button id="button4" onmouseover="mouseOver2()" onmouseout="mouseOut2()">ここにマウスを当ててみてください</button>

<script>
function mouseOver2() {
  button4.innerHTML = "マウスが当たりました!"
}

function mouseOut2() {
  button4.innerHTML = "マウスが離れました!"
}
</script>

動作確認用

  

Javascriptでのマウスイベントの実装例その7 mousemove

続いてご紹介するのは、「mousemove」イベントです。

mousemoveイベントはその名の通り、マウスが動かされている際に発行されるイベントです。

実装コード

<div id="mousemove-test" onmousemove="mouseMove(event)">
</div>

<script>
function mouseMove(e) {
  let str = "X座標:" + e.pageX + " Y座標:" + e.pageY
  document.getElementsByClassName("test").innerText = str
}

const titles = document.getElementsByClassName("title")
</script>

動作確認用

このように、マウスを動かすごとに、そのマウスが位置している座標が表示されているかと思います。

Javascriptでのマウスイベントの実装例その8 mousewheel

最後にご紹介するのは、「 mousewheel 」イベントです。

mousewheelイベントは、対象となるHTML要素がスクロールされた際に発行されるイベントです。

実装コード

<div onmousewheel="mouseWheel()" style="height: 100px; overflow: scroll;">
  <p>この中でスクロールしてみてください</p>
  <div style="height: 800px;">
  </div>
</div>

<script>
function mouseWheel(e) {
  console.log("スクロールされています!")
}
</script>

動作確認用

この中でスクロールしてみてください

このように、指定した範囲内でスクロールをすると、ディベロッパーツールのconsole画面に「スクロールされています!」という文章が表示されているかと思います。

最後に

さて、ここまでJavascriptを使ったマウスイベントの処理方法について解説してきましたがいかがでしたか?

マウスイベントを使った処理は、実際の開発の中でも頻繁に目にすることになりますので、ぜひこの機会にマスターしておきましょう。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。


JavaScriptを学び直すなら最新の第7版がおすすめ


2022年ITエンジニア大賞を受賞した話題本