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

投稿日：2016年10月10日更新日：2018年5月2日

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

サンプルソース

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

function addEvent(){
  //オブジェクト"btn2"のclickイベントにshowMessage関数を追加する
  document.getElementById("btn2").addEventListener("click", showMessage, false);
}

function showMessage(){
  alert('処理が追加されました');
}

function addEvent(){

//オブジェクト"btn2"のclickイベントにshowMessage関数を追加する

document.getElementById("btn2").addEventListener("click", showMessage, false);

}

function showMessage(){

alert('処理が追加されました');

}

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="button" id="btn1" value="処理追加" onclick="addEvent();" >
  <input type="button" id="btn2" value="実行" >
</body>
</html>

<head>

</head>

<body>

</body>

</html>

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

function addEvent(){
  document.getElementById("btn2").addEventListener("click",
    function(){
      alert('処理が追加されました')
    }, false
  );
}

function addEvent(){

document.getElementById("btn2").addEventListener("click",

function(){

alert('処理が追加されました')

}, false

);

}

実行サンプル

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

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

解説

既存の処理がある状態で、addEventListenerで処理を追加しても、既存の処理は消えません。
addEventListenerはIE9以降で有効です。IE8以前ではattachEventを使用します。

第１引数のイベントには以下のような値が指定できます。

【イベント】
値	意味
click	onclickイベントに処理を追加
focus	onfocusイベントに処理を追加
blur	onblurイベントに処理を追加
change	onchangeイベントに処理を追加
load	onloadイベントに処理を追加
unload	onunloadイベントに処理を追加
submit	onsubmitイベントに処理を追加

イベントを削除する方法は、「動的に追加したイベントを削除する」をご覧ください。

執筆者：とら