🦔

【JavaScript】マウスイベントについて

2023/10/29に公開

カリキュラムを進めていてマウスイベントをよく見かけると思い、直近で使いそうなマウスイベントを復習したいと思います。

マウスイベントとは

「クリック」する「マウスを移動する」などのように、ブラウザ上でユーザーが実行する動作のことを「イベント」と言います。
イベント検出を行うことで、マウスをかざしたりクリックすると色が変わるような処理ができます。

イベント	発生タイミング	バブリング	キャンセル
click	クリックされたとき	〇	〇
dblclick	ダブルクリックされたとき	〇
contextmenu	右クリックされたとき	〇	〇
mouseover	マウスポインタが要素に乗ったとき	〇	〇
mouseenter	マウスポインタが要素に乗ったとき	×	×
mouseout	マウスボタンが要素から離れたとき	〇	〇
mouseleave	マウスポインタが要素から離れたとき	×	×
mousemove	マウスポインタが要素の上を移動したとき	〇	〇
wheel(mousewheel)	ホイールボタンが回されたとき	〇	〇

バブリングとは

親要素のaddEventListenerにtrueを設定すると、子要素でイベントが発生した場合に親要素→子要素の順でイベントを実行することができます。これをバブリングといいます。

キャンセルとは

クリックなどのイベントが発生した要素から親要素に伝播していくことを防ぐこと。

上記表のように探してみるといろいろ出てきたマウスイベントたちでしたが、まだまだ実践で使用していないこともあり正直イメージができないため、今回はカリキュラムによく出てきた「マウスクリック」を取り上げヨプと思います。

今回はjQueryで要素にクリックイベント(click)を設定する方法です。こちらではjQueryのonメソッドを使用します。onメソッドとはイベントをセットするためのメソッドになります。
onメソッドの基本的な書き方

$(‘セレクタ’).on(‘イベント’, 処理);

今回のマウスクリックイベントに当てはめると下記のような書き方になります。

$('.セレクタ名').on('click', function() {
  イベント発生時に行われる処理
});

function()とは

JavaScriptにおいて処理をまとめて名前をつけることができるもの、この機能を使用することで、同じ処理を何度も記述しなくて済みます。下記は記述例になります。

function 関数名(引数1, 引数2, ...) {
  処理
}

上記の書き方を使用し、cssと組み合わせることで使用できます。
今回は例としてbox1をクリックすると太い黒枠が出る記述となります。

app.css

.box1 {
  background-color: #FF0000;
  height: 200px;
  width: 200px;
}

.box1-ext {
  border: 10px solid black;
}

app.js

$(function(){
  $('.box1').on('click', function(){
    $('.box1').addClass('box1-ext');
  });
});

クリック後のイメージ
onメソッドはクリック以外のイベントにも使用できるメソッドになっているので基本となってきますし、覚えておくとよりよいレイアウトに繋げられると思いました。