JavaScript

[JavaScript] イベント処理を動的に追加する(addEventListener)

投稿日:2016年10月10日 更新日:

clickイベントなどのイベント処理を、JavaScriptで動的に追加するには addEventListenerを使用します。

サンプルソース

例)「処理追加」ボタンを押すと、「実行」ボタンに処理を追加する

 

※以下のような無名Function で定義することもできます。

実行サンプル

「処理追加」ボタンを押す前に「実行」ボタンを押しても何も起こりませんが、 「処理追加」ボタンを押した後に「実行」ボタンを押すとアラートが表示されます。

※ 処理を追加する前の状態に戻したい場合は、F5キー等でリロードしてください。

解説

  • 既存の処理がある状態で、addEventListenerで処理を追加しても、既存の処理は消えません。
  • addEventListenerはIE9以降で有効です。IE8以前ではattachEventを使用します。
  • 第1引数のイベントには以下のような値が指定できます。
    【イベント】
    意味
    clickonclickイベントに処理を追加
    focusonfocusイベントに処理を追加
    bluronblurイベントに処理を追加
    changeonchangeイベントに処理を追加
    loadonloadイベントに処理を追加
    unloadonunloadイベントに処理を追加
    submitonsubmitイベントに処理を追加
  • イベントを削除する方法は、「動的に追加したイベントを削除する」をご覧ください。

スポンサーリンク

スポンサーリンク

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[JavaScript] 文字列をBase64デコードする(.atob)

文字列をBase64デコードするには、window.atobを使用します。 サンプルソース 例)文字列「abcdefg」 ...

[JavaScript] 数値の正数、ゼロ、負数を判定する(Math.sign)

数値の正数、ゼロ、負数を判定するには、Math.sign()を使用します。 構文 (aが正数かゼロか負数を判定する) v ...

[JavaScript] ブラウザの戻るボタン、次へボタンを実装する(history.back、history.forward)

javascriptでブラウザの履歴を操作するには、 window.history.back()、window.hist ...

[JavaScript] 指定した年が閏年かどうか判定する

指定した年が閏年かどうかを判定するファンクションサンプルです。 サンプル 例)引数に渡した年が閏年であればtrue、異な ...

[JavaScript] 協定世界時(UTC時刻)を取得する(.toUTCString)

協定世界時(UTC時刻)を取得するには、.toUTCString()を使用します。 サンプルソース 例)現在日時のUTC ...

スポンサーリンク