読者です 読者をやめる 読者になる 読者になる

FOR SE

文系の学部から新卒でメーカー系のSIerに就職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界に就職

このエントリーをはてなブックマークに追加

【Javascript】HTMLとjavascriptの分離~イベントハンドラの設定方法3パターン~

【今回の内容】


掲題の通り、HTMLとjavascriptの分離について紹介する



そもそもなぜHTMLとjavascriptの分離するのかー

HTMLとjavascriptの分離が分離されていないと以下のようなことが起こりうる

  ・関数を変えたいとき、HTMLを変える時、間違いが生じる可能性が出る
  ・デザイナーとエンジニア側で分業しにくい

 ※もっとありそうだけど、、、



■悪い事例

<html>
<body>
<form>

	<input type="text" id="item1" value="" ></input>
	<input type="button" id="item2" value="value2" onclick="test()"></input>

</form>

<script>

function test(){
	alert("");
}
</script>
</body>
</html>


※該当箇所はonclick="test()"の部分です。
 自分もまだまだなのでなにげなく書きがちだったですが、これを気に改めていこうかと。


イベントハンドラの設定

 上記のイベントハンドラの設定の仕方を回避するには以下のような手段があるみたいです
  ①name属性で指定(古い?)
  ②id属性で指定
  ③jQueryで指定
  

①の場合 name属性で指定

 ■感想

 name属性をそれぞれの要素につけなければならず、面倒。
 同じ関数呼び出しを行う要素に対し、一度に関数をセットする場合は良いかもしれない
 
 ※その場合もgetelementsbytagnameを使いそうだけど
 

 ■記述方法

>|javascript| 
 document.name属性.イベントハンドラ=関数;で指定 

 document.nameform1.nameinput3.onclick=test;
|


 ■参考

<html>
<body>
<form id="idform1" name="nameform1">

	<input type="text" id="idinput1" name="nameinput1" value="" ></input>
	<input type="button" id="idinput2"name="nameinput2" value="value2" ></input>
	<input type="button" id="idinput3"name="nameinput3" value="value3" ></input>

</form>

<script>

function test(){
	alert("");
}
document.nameform1.nameinput3.onclick=test;

</script>
</body>
</html>

②id属性で指定


 ■メモ

・①のname属性で指定するよりもすっきりする。
 ・上から順によみこむために、DOM生成がされる前や関数が読み込まれる前に
  関数をセットしようとするとうまくいかない。
  window.onloadを使用して回避する


 ■記述方法

  document.getElementById("ID名").イベントハンドラ=関数;
  
  document.getElementById("idinput2").onclick=test;
<html>

<body>
<form id="idform1" name="nameform1">

	<input type="text" id="idinput1" name="nameinput1" value="" ></input>
	<input type="button" id="idinput2"name="nameinput2" value="value2" ></input>
	<input type="button" id="idinput3"name="nameinput3" value="value3" ></input>

</form>


<script>
window.onload=function(){
document.getElementById("idinput2").onclick=test;
}

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

</script>
</body>
</html>

jQueryで指定


 ■メモ
  $().で簡単にオブジェクトにアクセスできる。
  関数を設定するというのがより簡単。


 ■記述方法

 $('#idinput2').attr('onclick','test()');
<html>
<head>
</head>
<body>
<form id="idform1" name="nameform1">

	<input type="text" id="idinput1" name="nameinput1" value="" ></input>
	<input type="button" id="idinput2"name="nameinput2" value="value2" ></input>
	<input type="button" id="idinput3"name="nameinput3" value="value3" ></input>

</form>


	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script>
	
	function test(){
		alert("");
		};

	$(function(){
		$('#idinput2').attr('onclick','test()');
		});

</script>
</body>
</html>


■参考サイト

 JavaScript のイベントハンドラ - daily dayflower

.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }