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] 関数から複数値を返す

通常JavaScriptの関数の戻り値は1つですが、 以下のようにすれば複数値返すこともできます。 方法1)配列で返す ...

[JavaScript] コンソールにメッセージを出力する

コンソールにメッセージを出力するサンプルです。 サンプルソース 例)ボタンを押すとコンソールにメッセージを出力する [c ...

[JavaScript] ページに文字列を出力する(document.write、document.writeln)

JavaScriptからページに文字列を出力するには、 document.write、document.writelnを ...

[JavaScript] JSON文字列からオブジェクトに変換する

JSON文字列をJavaScriptオブジェクトに変換するには JSON.parseを使用します。 サンプルソース 例) ...

[JavaScript] canvasタグに画像を読み込む

canvasタグに画像を読み込むサンプルです。 サンプルソース 例)ボタンを押すとcanvasに画像(inu.png)を ...

スポンサーリンク