【javascript】HTMLとjavascriptの分離についてのまとめ

【今回の紹介】

掲題の通り

【内容】

HTMLとjavascriptの分離について調べていくうちに段階があったのでメモしときます。

■第一段階；HTML内にonclickなどを入れる

<input type='button' id='button'value='サンプル' onclick='add1()'></input>
function add1(){
	alert("add1");
	}

■第二段階；HTMLとjavascriptの分離するため、スクリプトタグ内でDOMobjのonclickイベントに関数オブジェクトを追加

window.onload=function(){
	var button=$("button");
	button.onclick=add1;
}
function add1(){
	alert("add1");
	}

※二個以上の関数を登録しようとすると、上書きされてしまう。この場合は、add2が呼ばれる

window.onload=function(){
	var button=$("button");
	button.onclick=add1;
	button.onclick=add2;
	}
function add1(){
	alert("add1");
	}

function add2(){
	alert("add2");
	}

■第三段階；第二段階では同じイベントに対し、二つ以上のイベントの追加ができないため、リスナーを使用する

window.onload=function(){
	var button=$("button");
	button.addEventListener("click",add1,false);
	button.addEventListener("click",add2,false);
	}

■番外編

以下のようにもかける。いちよう一つのイベントにたいし、二つの関数を登録するということが可能。

window.onload=function(){
	var button=$("button");
	button.onclick=function(){
		add1();
		add2();
		}
	}