JS マウスイベント マウス移動のイベント一覧と使い方

今回は、「マウスの移動」に関するイベントについて見ていきましょう。

前回学習したクリックイベントとはまた違う動作になりますので、しっかりと学習していきましょう。

mousemove

「mousemove」は、要素内でマウスが移動したときに発生します。

<div class="move" id="mmove"></div>

let mouseMove = document.getElementById('mmove');
mouseMove.addEventListener('mousemove', function (e) {
  let position = 'X座標 : ' + e.pageX + ' Y座標 : ' + e.pageY;
  mouseMove.innerText = position;
});

ボックス内でマウスを動かすとマウスの座標が表示されます。

当サイトではここまでの学習の中で、「canvasタグ」を学習していませんが、canvasタグと組み合わせると線を引いたり、図形を描いたりすることが出来るようになります。

このあたりは別の機会にご紹介させて頂きます。

mouseenter と mouseleave

「mouseenter」はマウスが要素内に入った時、「mouseleave」はマウスが要素から出たときに発生します。

    <div class="move1" id="color"></div>

let moveColor = document.getElementById('color');
moveColor.addEventListener('mouseenter', function () {
  moveColor.style.backgroundColor = '#00ff99';
});

moveColor.addEventListener('mouseleave', function () {
  moveColor.style.backgroundColor = '#ffcccc';
});

ボックス内にマウスを移動すると背景色が変わり、ボックス内から外に出ると色が変わります。

mouseover と mouseout

mouseenter/leave との違い

先程の「mouseenter と mouseleave」と同じようなイベントが「mouseover と mouseout」になります。

両者の主な違いは、「バブリング」するかどうかです。

まずは、「mouseenter と mouseleave」について以下のボックスで確認してみましょう。

    <div class="div1" id="new11">
      div1
      <div class="div2" id="new21">
        div2
        <div class="div3" id="new31">div3</div>
      </div>
    </div>

let enterColor1 = document.getElementById('new11');
enterColor1.addEventListener('mouseenter', function () {
  enterColor1.style.backgroundColor = '#ffcccc';
  console.log('mouseenter1');
});

enterColor1.addEventListener('mouseleave', function () {
  enterColor1.style.backgroundColor = 'ffffff';
  console.log('mouseleave1');
});

let enterColor2 = document.getElementById('new21');
enterColor2.addEventListener('mouseenter', function () {
  enterColor2.style.backgroundColor = '#33ff00';
  console.log('mouseenter2');
});
enterColor2.addEventListener('mouseleave', function () {
  enterColor2.style.backgroundColor = '#ffffff';
  console.log('mouseleave2');
});

let enterColor3 = document.getElementById('new31');
enterColor3.addEventListener('mouseenter', function () {
  enterColor3.style.backgroundColor = '#0000ff';
  console.log('mouseenter3');
});

enterColor3.addEventListener('mouseleave', function () {
  enterColor3.style.backgroundColor = '#ffffff';
  console.log('mouseleave3');
});

マウスをボックスの外側から、「div1」、「div2」、「div3」と移動させると順番に色が変わります。

「div3」まで移動したら、逆に外に向かいます。

すると、「div3」、「div2」の色が白になります。

この一連の動作は、コンソールではどのように表示されているのでしょうか。

mouseenter1
mouseenter2
mouseenter3

mouseleave3
mouseleave2
mouseleave1

実際にページを再読み込みして、コンソールを見て頂くとわかりますが、マウスが移動したとおりに、イベントが発生しているのが分かると思います。

続いて、「mouseover と mouseout」について見てみましょう。

    <div class="div1" id="new1">
      div1
      <div class="div2" id="new2">
        div2
        <div class="div3" id="new3">div3</div>
      </div>
    </div>

let newColor1 = document.getElementById('new1');
newColor1.addEventListener('mouseover', function () {
  newColor1.style.backgroundColor = '#ffcccc';
  console.log('mouseover');
});
newColor1.addEventListener('mouseout', function () {
  newColor1.style.backgroundColor = '#ffffff';
  console.log('mouseout');
});

let newColor2 = document.getElementById('new2');
newColor2.addEventListener('mouseover', function () {
  newColor2.style.backgroundColor = '#33ff00';
  console.log('mouseover2');
});
newColor2.addEventListener('mouseout', function () {
  newColor2.style.backgroundColor = '#ffffff';
  console.log('mouseout2');
});

let newColor3 = document.getElementById('new3');
newColor3.addEventListener('mouseover', function () {
  newColor3.style.backgroundColor = '#0000ff';
  console.log('mouseover3');
});
newColor3.addEventListener('mouseout', function () {
  newColor3.style.backgroundColor = '#ffffff';
  console.log('mouseout3');
});

先程と同じように、ボックスの外側からマウスを「div3」まで移動して、「div3」から外に移動してください。

「mouseenter/leave」を使用したときと、あまり変わらない感じがしますが、コンソールにはどのように表示されているでしょうか。

「mouseenter/leave」のときとは違い、多くのイベントが発生しているのが分かると思います。

どのようにイベントが発生したのか、ゆっくり考えて頂くと分かると思いますが、一応解説してみます。

「div2」、「div3」に入るときと出るときに、しっかりと「バブリング」が起こっているのが分かると思います。

あとがき

マウスの移動に関連するイベントを見てきました。

それぞれの違いをしっかりと理解して、使い分けが出来るように覚えておきましょう。

今回も最後までお読み頂きありがとうございました。