イベント

クリックイベント、マウスオーバーイベント、ページ読み込みイベントなど、各イベントに関するちょっと便利なJavaScriptサンプル集。

• ボタンをクリックすると、関数を呼び出す
  

  ボタンクリックで、JavaScriptの関数を呼び出すサンプル。

• ラジオボタンをクリックすると、関数を呼び出す
  

  ラジオボタンクリックで、JavaScriptの関数を呼び出すサンプル。

• ページ読み込み時に、複数の関数を呼び出す
  

  ページ読み込み時に、JavaScriptの複数の関数を呼び出し実行するサンプル。

• ページ読み込み時に、特定のラジオボタンをクリック
  

  ページ読み込み時に、特定のラジオボタンをクリックした状態にするサンプル。

• クリックイベントにイベントハンドラをバインド
  

  id指定した要素のクリックイベントに、イベントハンドラをバインドするサンプル。

• ダブルクリックイベントにイベントハンドラをバインド
  

  id指定した要素のダブルクリックイベントに、イベントハンドラをバインドするサンプル。

• マウスムーブイベントにイベントハンドラをバインド
  

  id指定した要素内のマウスムーブイベントに、イベントハンドラをバインドするサンプル。

• マウスオーバーイベントとマウスアウトイベントにイベントハンドラをバインド
  

  id指定した要素のマウスオーバーイベントとマウスアウトイベントに、イベントハンドラをバインドするサンプル。

• クリックイベントに引数付きイベントハンドラを動的にバインド
  

  id指定した要素のクリックイベントに、引数付きイベントハンドラを動的にバインドするサンプル。

• リスト項目のクリックイベントに引数付きイベントハンドラを動的にバインド
  

  リスト項目のクリックイベントに、引数付きイベントハンドラを動的にバインドするサンプル。リスト項目に対し、動的にクリックイベントを割り当てることができると何かと便利だ。

• マウスのボタンを押している間実行し続け、ボタンを放すと止まるアニメーション
  

  マウスのボタンを押している間、カウントアップやカウントダウンをし続け、ボタンを放すと止まるアニメーションのJavaScriptサンプル。

• 特定のクラス名を持つ全ての要素のクリック時の処理を指定
  

  特定のクラス名を持つ全ての要素のクリックイベントにイベントハンドラをバインドするJavaScriptサンプル。複数の要素のクリックイベントにイベントハンドラをバインドするには、ページ読み込み時に、for文を使いバインドする。

• クリック時、関数は呼び出すが、リンク先「#」は開かないa要素　(1)
  

  a要素（アンカー要素）のクリックイベントのデフォルトの動作を停止し、指定した関数は呼び出すが、リンク先は開かないようにするJavaScriptサンプル。

• クリック時、関数は呼び出すが、リンク先「#」は開かないa要素　(2)
  

  event.preventDefault()メソッドで、a要素（アンカー要素）のクリックイベントのデフォルトの動作を停止し、指定した関数は呼び出すが、リンク先は開かないようにするJavaScriptサンプル。

• リンク先URLの末尾が「#」である複数のa要素のリンクを無効化　(1)
  

  リンク先URLの末尾が「#」である複数のa要素（アンカー要素）のクリックイベントのデフォルトの動作を停止し、指定した関数は呼び出すが、リンク先は開かないようにするJavaScriptサンプル。

• リンク先URLの末尾が「#」である複数のa要素のリンクを無効化　(2)
  

  event.preventDefault()メソッドで、リンク先URLの末尾が「#」である複数のa要素（アンカー要素）のクリックイベントのデフォルトの動作を停止し、指定した関数は呼び出すが、リンク先は開かないようにするJavaScriptサンプル。