JavaScriptでマウスオーバー(イベント伝搬あり)時に処理をしたい時に便利なmouseover・mouseoutイベントの使い方

マウスオーバー(ホバー)時のイベントを理解する

マウスが特定の要素の上にある時に実行したい処理がある場合はmouseovermouseoutイベントを利用します。

1つ注意点ですが、これらのイベントは「イベント伝搬」します。

イベント伝搬をさせたくない場合はmouseentermouseleaveイベントを利用します。

イベント

イベント発生条件
mouseoverマウスカーソルがデバイス要素上に乗った時(イベント伝搬あり)
mouseoutマウスカーソルがデバイス要素上から離れた時(イベント伝搬あり)
マウス関連のイベント

サンプルコード

サンプルコードとして、特定要素上にマウスカーソルが乗っているか乗っていないかを判別して文字列を出力するスクリプトを2つ紹介します。

これらの2つのコードは実は1点異なるポイントがあります。

全てのイベントリスナーのオプション値のcapturetrueを指定しているかfalseを指定しているかです。

「イベント伝搬」の方向を変更することで、マウスカーソルの判定が異なりますので注意深く比較して下さい。

Output

マウスカーソル系イベント発生順(capture: true)

    Pug
    #box.w-100.mb-3
    		#inner.w-100.m-4
    	p マウスカーソル系イベント発生順(capture: true)
    	ol#targetText
    SCSS
    #box,
    #inner {
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	box-sizing: border-box;
    	position: relative;
    }
    #box {
    	background-color: #576574;
    	#inner {
    		background-color: #40739e;
    		height: 100px;
    	}
    }
    JavaScript
    // 操作対象エリア
    const targetText = document.getElementById('targetText');
    const boxArea = document.getElementById('box');
    const innerArea = document.getElementById('inner');
    
    const mouseOption = {
    	capture: true,
    }
    boxArea.addEventListener('mouseover', () => {
    	mouseCursorLog = document.createElement("li");
    	//mouseCursorLog.setAttribute("id", "abe_prime_minister");
    	mouseCursorLog.textContent = '#box要素にマウスが乗った';
      targetText.appendChild(mouseCursorLog);
    },mouseOption);
    boxArea.addEventListener('mouseout', () => {
    	mouseCursorLog = document.createElement("li");
    	//mouseCursorLog.setAttribute("id", "abe_prime_minister");
    	mouseCursorLog.textContent = '#box要素からマウスが離れた';
      targetText.appendChild(mouseCursorLog);
    },mouseOption);
    
    innerArea.addEventListener('mouseover', () => {
      mouseCursorLog = document.createElement("li");
    	//mouseCursorLog.setAttribute("id", "abe_prime_minister");
    	mouseCursorLog.textContent = '#inner要素にマウスが乗った';
      targetText.appendChild(mouseCursorLog);
    },mouseOption);
    innerArea.addEventListener('mouseout', () => {
      mouseCursorLog = document.createElement("li");
    	//mouseCursorLog.setAttribute("id", "abe_prime_minister");
    	mouseCursorLog.textContent = '#inner要素からマウスが離れた';
    	targetText.appendChild(mouseCursorLog);
    },mouseOption);
    
    
    Output

    マウスカーソル系イベント発生順(capture: false)

      Pug
      .container.my-5
      	#box2.w-100.mb-3
      		#inner2.w-100.m-4
      	p マウスカーソル系イベント発生順(capture: false)
      	ol#targetText2
      	
      SCSS
      #box2,
      #inner2 {
      	display: flex;
      	justify-content: center;
      	align-items: center;
      	box-sizing: border-box;
      	position: relative;
      }
      #box2 {
      	background-color: #576574;
      	#inner2 {
      		background-color: #40739e;
      		height: 100px;
      	}
      }
      
      JavaScript
      // 操作対象エリア
      const targetText2 = document.getElementById('targetText2');
      const boxArea2 = document.getElementById('box2');
      const innerArea2 = document.getElementById('inner2');
      
      const mouseOption2 = {
      	capture: false,
      }
      boxArea2.addEventListener('mouseover', () => {
      	mouseCursorLog = document.createElement("li");
      	//mouseCursorLog.setAttribute("id", "abe_prime_minister");
      	mouseCursorLog.textContent = '#box2要素にマウスが乗った';
        targetText2.appendChild(mouseCursorLog);
      },mouseOption2);
      boxArea2.addEventListener('mouseout', () => {
      	mouseCursorLog = document.createElement("li");
      	//mouseCursorLog.setAttribute("id", "abe_prime_minister");
      	mouseCursorLog.textContent = '#box2要素からマウスが離れた';
        targetText2.appendChild(mouseCursorLog);
      },mouseOption2);
      
      innerArea2.addEventListener('mouseover', () => {
        mouseCursorLog = document.createElement("li");
      	//mouseCursorLog.setAttribute("id", "abe_prime_minister");
      	mouseCursorLog.textContent = '#inner2要素にマウスが乗った';
        targetText2.appendChild(mouseCursorLog);
      },mouseOption2);
      innerArea2.addEventListener('mouseout', () => {
        mouseCursorLog = document.createElement("li");
      	//mouseCursorLog.setAttribute("id", "abe_prime_minister");
      	mouseCursorLog.textContent = '#inner2要素からマウスが離れた';
      	targetText2.appendChild(mouseCursorLog);
      },mouseOption2);
      
      

      この様に、イベントリスナーのオプションのcaptureの設定の組み合わせにより、挙動が全く異なってきますので、イベントリスナーの仕組みをきちんと理解しておくことが非常に重要です。

      インストラクター
      コメント

      コメントを残す