JavaScriptイベントハンドラの登録

JavaScriptでイベントハンドラの登録するには次の2つがある。
・タグ内の属性として宣言する
・JavaScriptのコード内で宣言する

❖タグ内の属性として宣言する方法は次のように記述する。(下記の例では<input>文にonclickを宣言している)

<script type="text/javascript">
function btn_onclick(){
  window.alert('ボタンがクリックされました。');
}
</script>
<form>
<input type="button" value="ダイアログ表示" onclick="btn_onclick()"> 
</form>

❖JavaScriptのコード内で宣言する方法は、匿名関数にする場合と関数名を記述する方法がある。

①匿名関数にする場合

<script type="text/javascript">
window.onload = function() {
  document.getElementById('btn').onclick = function() {
    window.alert('ボタンがクリックされました。');
  }
}
</script>
<form>
<input id="btn" type="button" value="ダイアログ表示" > 
</form>

②関数名を記述する方法

<script type="text/javascript">
window.onload = load_set;
function load_set() {
    document.getElementById('btn').onclick = alert_set;
}
function alert_set() {
    window.alert('ボタンがクリックされました。');
}
</script>
<form>
<input id="btn" type="button" value="ダイアログ表示" > 
</form>

関数名を記述する場合は関数呼び出しでなく関数名を記述することに注意すること。次の記述は誤りである。

window.onload = load_set();