JavaScriptでmouseupイベントを設定する方法!

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

・mouseupイベントとは？
・mouseupイベントをつける方法
・mousedownとmouseupで背景色を切り替える

mouseupイベントとは？

mouseupイベントは、ユーザーがマウスボタンを押して離した瞬間に発生するイベントです。
例えば、ボタンや任意の要素をクリックした後(マウスボタンをあげたとき)に処理を実行する場合に利用されます。

mouseupは一般的に、クリックやドラッグ操作の完了をトリガーとする機能に役立ちます。

mouseupイベントをつける方法

mouseupイベントをHTML要素にonmousedownでつける方法と、addEventListenerでつける方法です。

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

HTMLのonmouseup属性を使用して、直接イベントを設定する方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>onmouseup Example</title>
</head>
<body>
    <button onmouseup="handleMouseUp(event)">クリックして離す</button>
    <script>
        function handleMouseUp(event) {
            alert('マウスボタンが離されました');
        }
    </script>
</body>
</html>

HTMLの解説

bodyタグの配下に、buttonタグを使用してボタンを作成しています。
onmouseup属性に関数を指定しました。これでボタンをクリックして離した際に、handleMouseUp関数が呼び出されます。

JavaScriptの解説

handleMouseUp関数では、アラートを表示するだけです。

動作確認

実際に動作を確認してみると、ボタンをクリックして離したときにアラート表示されることが確認できました。
mouseupイベントの動作確認

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

addEventListenerメソッドを使って、mouseupイベントを設定する方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>onmouseup Example</title>
</head>
<body>
    <button id="mouseUpButton">クリックして離す</button>
    <script>
        document.querySelector('#mouseUpButton').addEventListener('mouseup', function() {
            alert('マウスボタンが離されました');
        });
    </script>
</body>
</html>

HTMLの解説

先ほどと同様にbodyタグの配下に、buttonタグを使用してボタンを作成しています。
id属性を指定して、要素をスクリプトで取得しやすくしています。

JavaScriptの解説

querySelectorを使用して、ボタン要素(mouseUpButton)を取得しています。
そして、addEventListenerを指定してmouseupイベントをつけました。

第1引数にイベントを指定して、第2引数に動作する無名関数を指定しています。
動作確認すると、先ほどと同じようにボタンを押して離したときに、アラートが表示されることが確認できました。

mousedownとmouseupで背景色を切り替える

mousedownイベントとmouseupイベントを使って、要素の背景色を切り替えるサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>onmouseup Example</title>
</head>
<body>
    <div id="colorBox" style="width: 200px; height: 100px; background-color: yellow;">
        クリックで背景色を変更
    </div>
    <script>
        const colorBox = document.querySelector("#colorBox");

        // mousedownで背景色を赤に変更
        colorBox.addEventListener("mousedown", function () {
            colorBox.style.backgroundColor = "red";
        });

        // mouseupで背景色を青に変更
        colorBox.addEventListener("mouseup", function () {
            colorBox.style.backgroundColor = "blue";
        });
    </script>
</body>
</html>

HTMLの解説

bodyタグの配下に、divタグを用意しています。
クリックすると背景色が切り替わる要素を用意しています。

id属性で「colorBox」と指定して、要素を取得しやすくしています。
初期の色は黄色にしています。

JavaScriptの解説

スクリプトのほうでは、最初にquerySelectorを使って、要素(colorBox)を取得しています。
そのあとに取得した要素に対して、addEventListenerを使ってmousedownイベントとmouseupイベントをつけています。

mousedownイベントが発生したときには、要素の背景を赤色にしています。
そしてmouseupイベントが発生したときには、要素の背景を青色にしています。

動作としては最初に黄色で、ボタンをクリックすると赤色、ボタンから離すと青色になります。

動作確認

実際に動作確認すると、下記のように背景の色が変わっていくことが確認できました。
マウスを押したときと離したときのイベント確認

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

JavaScriptを使って、mouseupイベントを設定する方法について解説しました。
以下のポイントをまとめます。

・mouseupイベントは、マウスを押してから離したときに発生した。
・onmouseupとaddEventListenerを使うことで、イベントを設定することができた。
・mousedownとmouseupを一緒に使うことで、マウスを押したときと離したときに、それぞれ処理ができた。

コメント