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] 配列から条件に合致する値のみ取得する(.filter)

配列から条件に合致する値のみ取得するには、.filter()を使用します。 サンプルソース 例1)数値配列から値が5以上 ...

[JavaScript] URLのパラメータを取得する

JavaScriptでURLのパラメータを取得するには、 window.location.searchを使用します。 U ...

[JavaScript] 自然対数を求める(Math.log)

自然対数を求めるには、Math.log()を使用します。 構文 (a自然対数を求める) var x = Math.log ...

[JavaScript] 正規表現で文字チェックを行う

正規表現を使って文字チェックを行うサンプルです。 サンプルソース 例)正規表現パターンと一致判定を行う [crayon- ...

[JavaScript] 例外処理

例外処理のサンプルです。 例外処理の構文 例外処理の構文と書き方サンプルです。 (構文) try{  //例外が発生する ...

スポンサーリンク