【javascript】マウスイベント(mouseEvent)の種類と書き方

マウスイベントの種類
マウスイベントの中のメジャーなものを紹介したいと思います。
イベント | 発火のタイミング | |
---|---|---|
click | クリック | 要素をクリックした時 |
dblclick | ダブルクリック | ダブルクリックした時 |
mousedown | マウスダウン | クリックボタンを押した時 |
mouseup | マウスアップ | クリックボタンを離した時 |
mouseout | マウスアウト | ポインターが要素から離れた時 |
mouseover | マウスオーバー | ポインターが要素上にある時 |
mousemove | マウスムーブ | ポインターが要素上を移動している時 |
☟下の要素上でクリックしたり、ホバーしたりしてみてください
イベント | 結果 |
---|---|
click | 0回クリックされました‼ |
dblclick | 0回ダブルクリックされました‼ |
mousedown | |
mouseup | |
mouseout | |
mouseover | |
mousemove |
マウスイベントの書き方
HTMLに書く
要素のタグの中に、on + イベント(属性)="関数"
と書きます。
<div
onclick="clicked()"
ondblclick="dblClicked()"
onmousedown="mouseDown()"
onmouseup="mouseUp()"
onmouseover="mouseOver()"
onmouseout="mouseOut()"
onmousemove="mouseMove()"
></div>
javascript
それぞれのイベントの関数を書きます。
let clickedCount = 0;
let dblClickedCount = 0;
function clicked() {
clickedCount++;
console.log( `${clickedCount}回クリックされました‼`);
}
function dblClicked() {
dblClickedCount++;
console.log(`${dblClickedCount}回ダブルクリックされました‼`);
}
function mouseDown() {
console.log("クリックボタンを押した状態です‼");
}
function mouseUp() {
console.log("クリックボタンを離しました‼");
}
function mouseOut() {
console.log("ポインターが要素上から離れました‼");
}
function mouseOver() {
console.log("ポインターが要素上にあります‼");
}
function mouseMove() {
console.log("ポインターが要素上を移動中‼");
}
参考


addEventListenerを使う
addEventListenerを使うと、HTMLはクラス指定だけで、スッキリします。
<div class="box"></div>
javascript
関数はHTML上に書く場合と全く同じです。
要素.addEventListener("イベント", 関数)
box.addEventListener("click", clicked);
box.addEventListener("dblclick", dblClicked);
box.addEventListener("mousedown", mouseDown);
box.addEventListener("mouseup", mouseUp);
box.addEventListener("mouseout", mouseOut);
box.addEventListener("mouseover", mouseOver);
box.addEventListener("mousemove", mouseMove);
または、以下のようにいっしょに書くこともできます。
box.addEventListener("mousemove", function(){
console.log("ポインターが要素上を移動中‼");
});
まとめ
-
マウスイベント
click : 要素をクリックした時
dblclick : 要素をダブルクリックした時
mousedowm : クリックボタンを押した時
mouseup : クリックボタンを離した時
mouseout : ポインターが要素から離れた時
mouseover : ポインターが要素上にある時
mousemove : ポインターが要素上を移動している時
-
書き方
HTMLに属性を書く
要素のタグの中に、on + イベント(属性)="関数"
addEventListenerを使う
要素.addEventListener("マウスイベント""関数")
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを2つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは?window.innerHeightとは?window.pageYOffsetとは?
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript(Object.entries)を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク