目次

オブジェクトなJavaScriptの基礎講座

onChangeイベント処理

◆ 概説

onChangeイベントは以下の対象オブジェクトの値が変化すると発生します。

このイベントに対してブラウザ上で任意の処理を行うことができます。

対象オブジェクト

    select
    text
    textarea

onClickイベント処理の適用方法

例、選択ボックスで選択したURLのページを表示します。

<p>
<script type="text/javascript">
     function test(parts){
          location.replace(parts.options[parts.selectedIndex].value);
     }     
</script>
</p>
<form name="TestForm">
<p>
<SELECT NAME="PG_TOBU" onChange="test(this)">
<OPTION VALUE="" SELECTED>(一覧)
<OPTION VALUE="../index.html">トップページ
<OPTION VALUE="./2ndthema.htm">JavaScriptメニュー
<OPTION VALUE="./javasc21.htm">イベント処理メニュー
</SELECT>
<p>
</form>

例の処理結果

補足説明

通常、フォームはサブミットボタンでGOですが、onChangeイベントを利用すればサブミットボタンなしでいけます。

しかし、アクセシビリティの観点からは、このようなインターフェイスは、よろしくないみたいです。

目次