diadia

趣味のプログラムを書く 

addEventListenerの使い方

関連記事

イベントとイベントハンドラの設定

addEventListenerの使い方

意義としてはonclick等は一つのイベントに一つのイベントハンドラしか設置できない。一つのイベントに複数のイベントハンドラを設置するときにに役に立つ。

サンプル使用例

<!DOCTYPE html>
<html lang="utf-8">
	<head>
		<meta charset="utf-8">
		<title>ボタンクリックでコンソールログ表示とアラートの表示</title>

	</head>
	<body>
		<button id="btn" type="submit">表示する</button>

		<script>
			var btn = document.getElementById("btn");
            window.onload = function(){
            	btn.addEventListener("click", function(){
                    console.log("load成功");
            	});
                 
                btn.addEventListener("click", function(){
                    alert("load成功");
            	});

                   			}
		</script>
	</body>