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

JavaScriptのonmousedownイベントとは？使い方とサンプルコードを解説

onmousedownイベントは、ユーザーがマウスボタンを押した瞬間に発生するイベントです。ボタンがクリック（押して離す）される前に反応できるため、クリック操作に素早く応答したい場合に便利です。

onmousedownイベントの基本

onmousedownは、HTML要素に対してマウスの左ボタン・右ボタン・中央ボタンのいずれかが押されたタイミングで発火します。似たイベントとして以下のようなものがあります。

  • onmousedown：マウスボタンが押されたとき
  • onmouseup：押されていたマウスボタンが離されたとき
  • onclick：マウスボタンが押され、同じ要素上で離されたとき（完全なクリック）

サンプルコード

以下のコードを実行すると、テキスト部分でマウスボタンを押したときにアラートが表示されます。onmousedownイベントの基本的な使い方を確認できます。

<html>
   <head>
      <script>
         <!--
            function sayHello() {
               alert("ここがクリックされました。")
            }
         //-->
      </script>
   </head>
   <body>
      <p onmousedown = "sayHello()">これはデモ用テキストです。マウスボタンを押すとonmousedownイベントが発生します</p>
   </body>
</html>

コードの解説

このサンプルでは、<p>要素にonmousedown = "sayHello()"という属性を設定しています。ユーザーがこの段落上でマウスボタンを押すと、sayHello()関数が呼び出され、アラートダイアログが表示されます。

より現代的な書き方としては、addEventListenerメソッドを使う方法も推奨されています。

document.querySelector("p").addEventListener("mousedown", function() {
   alert("ここがクリックされました。");
});

onmousedownイベントは、ドラッグ操作の開始検出や、ゲームでの素早い入力反応など、押した瞬間に処理を実行したい場面で活用できます。

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

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

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

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