【Javascript】HTMLとjavascriptの分離～イベントハンドラの設定方法３パターン～
【今回の内容】
掲題の通り、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属性で指定
■感想
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>
■参考サイト
