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

JavaScriptのondblclickイベントとは？ダブルクリック時の使い方を解説

JavaScriptのondblclickイベントは、要素がダブルクリックされたときに発生するイベントです。ボタンやテキスト、画像など、任意のHTML要素に設定でき、ユーザーが素早く2回クリックしたタイミングで、あらかじめ指定しておいた処理を実行できます。

ondblclickイベントの基本構文

ondblclickイベントは、HTML属性として直接記述するのが最もシンプルな使い方です。以下のように、対象となる要素に属性を追加します。

<html>
   <head>
      <script>
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>
   </head>
   <body>
      <p ondblclick="sayHello()">ここをダブルクリックしてください</p>
  </body>
</html>

サンプルコードの解説

上記のコードでは、次のような仕組みで動作しています。

  • 関数の定義：<head>内の<script>タグで、sayHello()関数を定義しています。この関数が呼び出されると、「Hello World」というメッセージがアラートダイアログで表示されます。
  • イベントの設定：<p>要素のondblclick属性に「sayHello()」を指定することで、このテキストをダブルクリックした瞬間に関数が実行されます。

動作確認のポイント

このコードをブラウザで開き、表示されたテキストを素早く2回クリックすると、アラートダイアログが表示されます。シングルクリックでは反応しない点に注意してください。

補足：addEventListenerを使った書き方

近年の開発では、HTMLに直接イベントを記述する代わりに、JavaScript側でaddEventListener('dblclick', 関数名)を使う方法も広く使われています。HTMLとJavaScriptを分離できるため、コードの保守性が向上します。

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

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

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

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