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

投稿日 : 2022年02月01日 更新日 :

マウスイベントの種類

イベント		発火のタイミング
click	クリック	要素をクリックした時
dblclick	ダブルクリック	ダブルクリックした時
mousedown	マウスダウン	クリックボタンを押した時
mouseup	マウスアップ	クリックボタンを離した時
mouseout	マウスアウト	ポインターが要素から離れた時
mouseover	マウスオーバー	ポインターが要素上にある時
mousemove	マウスムーブ	ポインターが要素上を移動している時

☟下の要素上でクリックしたり、ホバーしたりしてみてください

イベント	結果
click	0回クリックされました‼
dblclick	0回ダブルクリックされました‼
mousedown
mouseup
mouseout
mouseover
mousemove

マウスイベントの書き方

HTMLに書く

HTML

  <div
    onclick="clicked()"
    ondblclick="dblClicked()"
    onmousedown="mouseDown()"
    onmouseup="mouseUp()"
    onmouseover="mouseOver()"
    onmouseout="mouseOut()"
    onmousemove="mouseMove()"
    ></div>

javascript

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("ポインターが要素上を移動中‼");
  }

参考

【javascript】バッククォート内のドルマークの使い方 ` ${ } `

【javascript】onclickの書き方と使い方 クリックした値を取得する

addEventListenerを使う

HTML

  <div class="box"></div>

javascript

javascript

  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("ポインターが要素上を移動中‼");
  });

まとめ