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] オブジェクトが配列かどうか判定する

オブジェクトが配列かどうか判定するサンプルです。 サンプル instanceofを使う方法と、Array.isArray ...

[JavaScript] 配列の先頭の要素を取り出す(.shift)

配列の先頭の要素を取り出すには、.shift()を使用します。 サンプルソース 例)配列から先頭の要素を取り出してコンソ ...

[JavaScript] keypressイベントを取得する(onKeyPress)

keypressイベントを取得するサンプルです。 サンプルソース 例1)テキストボックスでキーを押すとキーコードが表示さ ...

[JavaScript] テキストの選択範囲のカーソル位置を取得する

JavaScriptでテキストボックスのカーソル位置を取得するには、 selectionStart、selectionE ...

[JavaScript] URLからポート番号を取得する(location.port)

URLからポート番号を取得するには、location.portを使用します。 サンプルソース 例)現在のページのURLか ...

スポンサーリンク