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

nas

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

確認環境
・Windows10
・Google Chrome

目次

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

画面表示時に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").textContent;

	if(str1=="OK"){
		document.getElementById("p2").textContent = "テストa";
	}else{
		document.getElementById("p2").textContent = "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").textContent;

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

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

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

 

イベントリスナの中のthisが指す対象

イベントリスナの中のthisが指す対象のサンプルです。

<p id="p1">テスト１</p>

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

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

console.log(this); //<p id="p1">テスト１</p>

});
</script>

8行目のthisは、1行目のイベントの発生元を指します。

 

addEventListenerメソッド

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

関連の記事

JavaScript イベントリスナを削除する(removeEventListener)
JavaScript イベントのバブリングとキャンセル
JavaScript イベントを無効化する(preventDefault)
JavaScript イベントとイベントハンドラのサンプル

△上に戻る