JavaScript イベントリスナを登録する(addEventListener) |

JavaScriptのイベントリスナを登録するサンプルです。
addEventListenerメソッドを使用します。動くサンプルもあります。

イベントリスナを登録するサンプル
１つの要素にイベントリスナを２つ登録するサンプル
addEventListenerメソッド

イベントリスナを登録するサンプル

画面表示時にaddEventListenerメソッドで「クリックして下さい」という文言にイベントリスナを設定しています。
下の「クリックして下さい」という文言をクリックすると「テスト１」の文言が変化します。

クリックして下さい

テストa

コード

上記サンプルのコードです。

<p id="p1">クリックして下さい</p>
<p id="p2">テストa</p>

<script>
const p1 = document.getElementById("p1");

p1.addEventListener("click",function(e){ 

	const str1 = document.getElementById("p2").innerHTML;

	if(str1=="OK"){
		document.getElementById("p2").innerHTML = "テストa";
	}else{
		document.getElementById("p2").innerHTML = "OK";
	}
});
</script>

5行目は、getElementByIdメソッドでID「p1」を指定して対象(1行目)を特定しています。
7行目は、addEventListenerメソッドです。画面表示時にイベントリスナを登録をしています。
function(e)のeは、Eventオブジェクトです。Eventオブジェクトはイベントリスナの引数として自動で渡されます。

１つの要素にイベントリスナを２つ登録するサンプル

１つの要素にaddEventListenerメソッドでイベントリスナを２つ登録します。
「クリックして下さい2」という文言をクリックすると「テストb」と「テストc」の文言が変化します。

クリックして下さい2

テストb

テストc

コード

上記サンプルのコードです。

<p id="p3">クリックして下さい2</p>
<p id="p4">テストb</p>
<p id="p5">テストc</p>

<script>
const p3 = document.getElementById("p3");
p3.addEventListener("click",test1);
p3.addEventListener("click",test2);

function test1(e){
	const str = document.getElementById("p4").innerHTML;

	if(str=="OK2"){
		document.getElementById("p4").innerHTML = "テストb";
	}else{
		document.getElementById("p4").innerHTML = "OK2";
	}
}
function test2(e){
	const str = document.getElementById("p5").innerHTML;

	if(str=="OK3"){
		document.getElementById("p5").innerHTML = "テストc";
	}else{
		document.getElementById("p5").innerHTML = "OK3";
	}
}
</script>

6行目は、getElementByIdメソッドでID「p3」を指定して対象(1行目)を特定しています。
7行目と8行目は、addEventListenerメソッドでイベントリスナを2つ登録しています。
1行目の行がクリックされたら、test1関数とtest2関数を実行するという意味です。
test1の関数は10行目にあります。test2の関数は、19行目にあります。
function(e)のeは、Eventオブジェクトです。Eventオブジェクトはイベントリスナの引数として自動で渡されます。

addEventListenerメソッド

要素(オブジェクト).addEventListener(イベントの種類, 関数[, オプション]);

指定の要素(オブジェクト)にイベントリスナを登録します。
イベントリスナは、指定したイベントの種類の発生を監視し、指定のイベントが発生した場合、関数を実行します。
以下はMDNのaddEventListenerメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener