イベントハンドラ１

イベントハンドラに与えるJavaScriptプログラムの部分は、さまざまな書き方をすることができる。関数を指定することもできるし、直接に長いプログラムを記述することもできる。

関数を指定するときは、先に関数を定義しておく。たとえば、事前にprintstatus関数が定義してある場合、それを呼び出す記述は下記。

<input type="button" onclick="printstatus"()" />

上記の記述では、フォームのボタンをクリックしたとき（onclick）にprintstatus関数が呼び出され、関数内に記述されている処理が行われる。

▼JavaScriptのプログラムを直接記述する場合▼

<input type="button" onclick="
  if(value>=4) {alert('you are Right!');}
  else {alert("Oh no!");}
" />

複数のコマンドを使用したいときは、「;」（セミコロン）で分離することで実装可能。

<input type="button" onclick="
   appName=navigator.appName;
   alert('あなたのWebブラウザは'+appName+'ですね。');
" />

JavaScriptはどこに記述しても良いことになっている。もし記述が短いものならば、HTMLタグ内のイベントハンドラに直接プログラミングを記述しても構わないのだが、記述が長い場合には、視認性や後々のメインテナンス性を考慮し、関数を定義してイベントハンドラで呼び出すほうがよい。

以下のコードは視認性がよくない例

<input type="button" onclick="
   if(value>=4) {
   document.write(navigator,appName);
   document.write(navigator.appversion);
   }
   else if(value==3) {
   alert('このページがちゃんと動くかい？');
   document.write('<A href="******">');
   }
   else {
   ･････････
               }
" />

上のonclick以降のスクリプトを関数化し呼び出す形式にする。

<script type="text/javascript">
fonction check() {
   if(value>=4)
      document.write(navigator.appName);
      document.write(navigator.appversion);
  }
  else if(value==3) {
      alert('このページがちゃんと動くかい？');
      document.write('<A href="*****">');
  }
  else {
  ･･････
  }
</script>
<form>
<input type="button" onclick="check()" />
</form>

呼び出す処理を同じWebページ内で何度も行うならば、この方が記述量が少なくなり、視認性、メインテナンス性が向上する。

（注）イベントハンドラは、どのHTMLタグにも属性としてつけられるものではない。