JavaScriptでmouseoutイベントを設定する方法！

JavaScriptを使って、mouseoutイベントを設定する方法などについて説明します。
実際に動くサンプルを使いつつ、以下について書いています。

・mouseoutイベントとは？
・mouseoutイベントをつける方法
・ページからマウスを外すと画像が表示されるサンプル

mouseoutイベントとは？

mouseoutイベントは、ユーザーのマウスが、イベントを設定した要素から離れたときに発生します。
このイベントを活用することで、要素からカーソルが外れた際に特定のUI変更や動作を実現できます。

mouseoutイベントをつける方法

mouseoutイベントをつける方法です。
属性値を設定するか、addEventListenerメソッドを使って設定できます。

DOMにmouseoutを使ってイベントをつける

HTMLのonmouseout属性を使って、直接イベントを設定する方法です。
下記のコードでは、divタグの要素内にマウスカーソルを合わせてから、カーソルが外れると色が変わるようにしてみました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Mouseoutのテスト</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            border: 1px solid black;
            text-align: center;
            line-height: 200px;
        }
    </style>
    <script>
        function changeColor() {
            const box = document.querySelector('#box');
            box.style.backgroundColor = 'lightgreen';
        }
    </script>
</head>
<body>
    <div id="box" onmouseout="changeColor()">マウスを乗せてから外す！</div>
</body>
</html>

HTMLの解説

bodyタグの中に、divタグをひとつ用意して、マウスが外された時に色が変わるようにしています。
onmouseout属性を指定していて、マウスが外されるとchangeColor関数が実行されます。

JavaScriptの解説

changeColor関数では、querySelectorメソッドを呼び出して、divタグ取得するようにしています。
そして、取得したdivタグの背景色にlightgreenを設定しました。

これで、マウスが外されると背景色がlightgreenになります。

動作確認

実際に動作させると、下記のように要素からマウスを外したときだけ、div要素の色が変わっていることが確認できました。

JavaScriptのmouseoutイベントの動作確認

addEventListenerを使ってイベントをつける

addEventListenerメソッドを使うことでも、対象の要素にmouseoutイベントをつけることができます。
先ほどのコードを少し変えて、addEventListenerメソッドでイベントをつけてみました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Mouseoutのテスト</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            border: 1px solid black;
            text-align: center;
            line-height: 200px;
        }
    </style>
    <script>
        window.onload = () => {
            const box = document.querySelector('#box');
            box.addEventListener('mouseout', () => {
                box.style.backgroundColor = 'lightgreen';
            });
        };
    </script>
</head>
<body>
    <div id="box">マウスを乗せてから外す！</div>
</body>
</html>

HTMLの解説

先ほどと同様にdivタグを用意しています。
JavaScriptからイベントを追加するため、onmouseout属性を削除しています。

JavaScriptの解説

window.onloadを使用して、ページの読み込み時に処理されるようにしています。

最初にquerySelectorで、divタグの要素を取得しました。
そのあとに取得した要素から、addEventListenerメソッドを使用してイベントをつけています。

第1引数にmouseoutを指定して、mouseoutイベントをつけています。
第2引数にイベントが実行された時の処理を、無名関数で書いています。

実際に動作させると、先ほどと同様に、要素からマウスを外すと背景が変わりました。

ページからマウスを外すと画像が表示されるサンプル

mouseoutを使って、ブラウザからマウスを外すと、画像が表示されるようなサンプルを作成しました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Mouseoutで画像表示</title>
    <script>
        window.onload = () => {
            document.addEventListener('mouseout', function (event) {
                if (!event.relatedTarget) {
                    document.getElementById('image').style.display = 'block';
                }
            });
        };
    </script>
</head>
<body>
    <div id="message">ブラウザからマウスを外してください</div>
    <img id="image" src="image1.png" style="display: none; width: 300px;">
</body>
</html>

HTMLの解説

bodyタグの配下に、タグを2つ配置しています。
1つめは単純にメッセージを表示しているdivタグです。

2つめが、最初に非表示にしておくimageタグです。(display:noneで非表示にしています)
マウスがページから離れると、この画像が表示されます。

JavaScriptの解説

documentに対して、addEventListenerメソッドを使ってmouseoutイベントをつけています。
これで、ページ全体にmouseoutイベントが効きます。

ページのメッセージなど他の要素にのったときにも、mouseoutイベントが走るので
「!event.relatedTarget」と判定して、要素にのっていないときに画像を表示するようにしました。

マウスがページから外れると、imageタグのdisplay属性をblockにして表示しています。

動作確認

実際に動作を確認すると、下記のようにページからマウスカーソルが出た時に画像が表示されるようになりました。
mouseoutイベントで画像の表示・非表示

JavaScriptでmouseoutイベントを設定する方法まとめ

今回はJavaScriptのmouseoutイベントを設定する方法について書きました。
まとめると、下記のようになります。

・mouseoutイベントはマウスを対象から外したときに発生するイベント。
・mouseoutイベントはonmouseoutとaddEventListenerで設定することができた。

コメント