hakeの日記

Windows環境でプログラミングの勉強をしています。

javascript イベントハンドラの動的な追加と削除

program javascript

関数名の記述について、add(remove)EventListenerの引数では括弧()があると上手く動作しない。また、buttonタグのonlick属性では括弧()が無いとダメ。クォートで囲む場合は括弧()が必要ということ？
add(remove)EventListenerの第3引数はとりあえずfalseにしておく。

あとhtaでは、add(remove)EventListenerは使用できないので、attach(detach)Eventを使用する。この場合引数のイベント名はclickではなくonclick。
またhtaではtextarea内の改行が使用できない。

<!DOCTYPE html>
<html lang='ja'>
<head>
	<meta http-equiv="content-type" content="text/html; charset=shift_jis">
	<script type="text/javascript">
		function print(s){
			var t = document.getElementById('disp');
			t.innerHTML = t.innerHTML + s + '&#13;'; // '&#13;'はTEXTAREA内の改行
		}

		function hello(){
			print('Hello World!');
		}

		function add_event(){
			document.getElementById('btn').addEventListener('click', hello, false);
			//document.getElementById('btn').attachEvent('onclick', hello);
			alert('イベントハンドラを追加しました。');
		}

		function remove_event(){
			document.getElementById('btn').removeEventListener('click', hello, false);
			//document.getElementById('btn').detachEvent('onclick', hello);
			alert('イベントハンドラを削除しました。');
		}


//		window.onload = function(){
//			document.getElementById('btn').addEventListener('click', hello, false);
//			alert('onload イベントが発生しました。');
//		}
	</script>
</head>
<body>
	<textarea id='disp' rows='10' cols='40'></textarea><br>
	<button id='btn'>Hello</button><br>
	<button onclick='add_event()'>イベント追加</button>
	<button onclick='remove_event()'>イベント削除</button>

</body>
</html>