JavaScriptを使って、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関数では、アラートを表示するだけです。
動作確認
実際に動作を確認してみると、ボタンをクリックして離したときにアラート表示されることが確認できました。
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イベントを設定する方法について解説しました。
以下のポイントをまとめます。
・onmouseupとaddEventListenerを使うことで、イベントを設定することができた。
・mousedownとmouseupを一緒に使うことで、マウスを押したときと離したときに、それぞれ処理ができた。
コメント