JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのonmouseupイベントとは？使い方とサンプルコードをわかりやすく解説

onmouseupイベントとは

onmouseupイベントは、ユーザーがマウスボタンを押し、その後ボタンを離した（解放した）瞬間に発生するJavaScriptのイベントです。クリック操作の中でも「指を離す」タイミングを検出したい場合に利用されます。

このイベントは、<p>や<div>など、ほとんどのHTML要素に対して設定できます。HTML属性として直接記述する方法のほか、addEventListener()を使って登録することも可能です。

onmousedownとの違い

  • onmousedown: マウスボタンを「押し込んだ」瞬間に発生
  • onmouseup: マウスボタンを「離した」瞬間に発生
  • onclick: 押して離す一連の操作が完了したときに発生

サンプルコード

次のコードを実行すると、テキストの上でマウスボタンを離したタイミングでアラートが表示されます。onmouseupイベントの基本的な動作を確認できます。

<html>
   <head>
      <script>
         <!--
            function sayHello() {
               alert("Mouse Up")
            }
         //-->
      </script>
   </head>
   <body>
      <p onmouseup = "sayHello()">これはマウスアップイベント用のデモテキストです。</p>
   </body>
</html>

コードのポイント

  • <p>要素のonmouseup属性に、実行したい関数名（ここではsayHello()）を指定しています。
  • 対象となるテキスト上でマウスボタンを押してから離すと、alert("Mouse Up")が実行され、「Mouse Up」というメッセージが表示されます。

まとめ

onmouseupイベントは、マウスボタンが離された瞬間を検出できるシンプルで便利なイベントです。ドラッグ操作の終了判定や、独自のインタラクションを実装する際にも活用できるので、onmousedownやonclickとの違いを理解しておくと良いでしょう。

  1. JavaScriptのoninputイベントとは？基本的な使い方を実例付きで解説

    oninputイベントは、テキストボックスなどの入力フィールドにユーザーが値を入力したタイミングで発生するJavaScriptのイベントです。文字を入力したり削除したりするたびに即座に処理が実行されるため、入力内容のリアルタイム表示やバリデーションなど、インタラクティブなWebページを作成する際に非常に便利です。 oninputイベントの基本的な実装例 以下のコードでは、テキストボックスに入力された内容を取得し、その場ですぐに画面へ表示しています。 <!DOCTYPE html> <html>    <body>  &

  2. JavaScriptのイベントキャプチャとは？仕組みと実装方法を解説

    イベントキャプチャ（Event Capturing）とはイベントキャプチャとは、発生したイベントがDOMツリーの最上位要素からターゲット要素へと向かって伝播していく仕組みのことです。これは、ターゲット要素から最上位要素へと逆方向にイベントが伝わるイベントバブリング（Event Bubbling）とは正反対の動作になります。なお、DOMにおけるイベント伝播は「キャプチャフェーズ」「ターゲットフェーズ」「バブリングフェーズ」の3段階に分かれており、イベントキャプチャはその最初の段階に相当します。windowやdocumentなどの上位ノードから順に、下位ノードへとイベントが降りていくイメージです。