JavaScriptのイベント

イベントドリブンモデルとは

ページ中で発生したさまざまな出来事（イベント）に応じて対応する処理（イベントハンドラ）を呼び出し、実行するモデル

イベント

・onClick
・onDblClick
・onKeyDown
・onKeyPress
・onKeyUp
・onMouseDown
・onMouseUp
・onMouseOver
・onMouseOut
・onMouseMove
・onLoad
・onUnload
・onFocus
・onBlur
・onSubmit
・onReset
・onChange
・onResize
・onMove
・onDragDrop
・onAbort
・onError
・onSelect

イベントの指定

タグの属性部分に指定する

<form action="#">
<input type="button" value="OK" onClick="alert('OK!!')">
</form>

セミコロン（;）で区切ることにより、複数の文を呼び出すことが可能

<form action="#">
<input type="button" value="OK" onClick="alert('A'); alert('B')">
</form>

イベントハンドラとは

イベントに関連づけられた関数

イベントハンドラの指定

関数は通常、<head>～</head> の間で定義する

<head>
<script type="text/javascript">

</script>
</head>

<body>
<form action="#">
<input type="button" value="OK" onClick="Kansu()">
</form>
</body>

要素本来の動きを止める

return false;

イベントハンドラの戻り値として false を返すことにより、本来の動作（クリック時の動作など）を無効化することができる

【例】
<script type="text/javascript">

</script>

<a href="xxx.htm" onClick="return kakunin()">XXX</a>
<form action="xxx.cgi">
<input type="submit" value="OK" onClick="return kakunin('OK');">
</form>

ラジオボタンの注意

ラジオボタンのタグに直接イベントハンドラを指定する場合、
onChange だとIEで反応しないことがある。
onClick を使用する。