addEventListner( "クリックなどのイベント" , 関数 , falese );

addEventListenerは既にイベントが設定されている対象に追加でイベントを発生させる。

最初にボタンのイベントハンドラonclick=""で関数func1()を呼び出す。 次にaddEventListener()で関数fnc2を同じボタンに追加する。

1. クリックはonclickではなくclick。また" "で囲む。
2. 関数は（　）は要らない
3. falseは伝播形式

[ソースコード]

<form>
<input type="button" id="event" value="イベント発動" onclick="func1()" />
</form>

<p>おはよう。<span id="output"></span>こんばんは。</p>

<script type="text/JavaScript">
<!-- 
/***************************
	HTML内で呼び出す関数
***************************/
	function func1(){
		alert("こんにちは。赤枠にも「こんにちは。」って出力されるよ。\nひとつのボタンで2つ以上のイベントを発生させるのがaddEventListenerです。");
					}

	var addAction = document.getElementById("event"); // ボタンのid="event"にアクセス

/**************************
	関数を直接記述
**************************/
	addAction.addEventListener("click",function(){ // id="event"に対してイベント追加
		document.getElementById('output').innerHTML = "こんにちは。"; // id="output"の場所へ記述
							}
							);

/*************************
	若しくは関数を定義しておいて
*************************/
	function func2(){
		document.getElementById('output').innerHTML="こんにちは。"; // id="output"の場所へ記述
					}

	addAction.addEventListener("click",func2); // id="event"に対してイベント追加。func2に（）は要らない

//-->
</script>

インデックスページに戻る