目次

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

onClickイベント処理

◆ 概説

onClickイベントは以下の対象オブジェクトをクリックすると発生します。

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

対象オブジェクト

    button
    checkbox
    link
    radio
    reset
    submit

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

例、緑、赤、青ボタン各々のクリックでその値をテキストボックスへ表示する。

<STYLE TYPE="text/css">
<!--
.fs1 {background-color:green; color:white}
.fs2 {background-color:red; color:white}
.fs3 {background-color:blue; color:white}
-->
</STYLE>
<p>
<script type="text/javascript">
     function test(parts){
        document.TestForm.Msg.value = parts.value;
     }     
</script>
</p>
<form name="TestForm">
<p>
<INPUT TYPE="text"   NAME="Msg" SIZE=20><br>
<INPUT TYPE="button" VALUE="緑ボタン" CLASS="fs1" onClick="test(this)"><br>
<INPUT TYPE="button" VALUE="赤ボタン" CLASS="fs2" onClick="test(this)"><br>
<INPUT TYPE="button" VALUE="青ボタン" CLASS="fs3" onClick="test(this)"><br>
</p>
</form>

例の処理結果





補足説明

this はカレントオブジェクトへの参照を表す予約語です。

あるイベントが発生したときにthisをイベント処理関数の引数へ渡すことにより、 イベント処理関数側でこのイベントが発生した部品オブジェクトの参照することができます。

また、カレントオブジェクトのあるフォームオブジェクトへの参照は this.formで可能です。

目次