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

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサーリンク