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

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

addEventListenerメソッド

イベントリスナを登録します。
以下はMDNサイトのaddEventListenerメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

addEventListenerメソッドのサンプル

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

クリックして下さい

テストa

コード

上記サンプルのコードです。
5行目は、getElementByIdメソッドでID「p1」を指定して対象(2行目)を特定しています。
7行目は、addEventListenerメソッドでイベントリスナの登録をしています。
function(e)のeは、Eventオブジェクトです。Eventオブジェクトはイベントリスナの引数として自動で渡されます。

<body >
<p id="p1">クリックして下さい</p>
<p id="p2">テストa</p>
<script>
var t1 = document.getElementById('p1');
// 1．イベントリスナの登録
t1.addEventListener("click",function(e){ 
	console.log(e); //Eventオブジェクトの内容を確認
	var str = document.getElementById("p2").innerHTML
	if(str=='OK'){
		document.getElementById("p2").innerHTML = "テストa";
	}else{
		document.getElementById("p2").innerHTML = "OK";
	}
});
</script>
</body>

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

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

クリックして下さい2

テストb

テストc

コード

上記コードのサンプルです。
6行目は、getElementByIdメソッドでID「p3」を指定して対象(2行目)を特定しています。
8行目と9行目では、addEventListenerメソッドでイベントリスナを2つ登録しています。test1の関数は11行目にあります。test2の関数は、20行目にあります。

<body >
<p id="p3">クリックして下さい2</p>
<p id="p4">テストb</p>
<p id="p5">テストc</p>
<script>
var t2 = document.getElementById('p3');
// 1．イベントリスナの登録
t2.addEventListener("click",test1);
t2.addEventListener("click",test2);

function test1(e){
	console.log(e); //Eventオブジェクトの内容を確認
	var str = document.getElementById("p4").innerHTML
	if(str=='OK2'){
		document.getElementById("p4").innerHTML = "テストb";
	}else{
		document.getElementById("p4").innerHTML = "OK2";
	}
}
function test2(e){
	var str = document.getElementById("p5").innerHTML
	if(str=='OK3'){
		document.getElementById("p5").innerHTML = "テストc";
	}else{
		document.getElementById("p5").innerHTML = "OK3";
	}
}
</script>
</body>