HTMLのonclick属性はHTMLの要素に対してユーザーのクリックの操作により起動するスクリプトを指定するイベントハンドラ属性の１つです。
HTMLの全ての要素に対してonclick属性を指定することが可能で、要素がクリックされた時にonclick属性に指定された処理が行われます。
またHTMLのフォームのテキストフォームなどではフォーカスされている時にEnterキーを押すことによってonclickのイベントが発生させる事が出来ます。つまりクリック以外の場合でもonclick属性で指定した処理が発生する可能性があることは知っておきましょう。
onclick属性では値にスクリプトを記述します。
例えば以下はonclick属性の値にスクリプトで処理を直接記述しているサンプルコードです。
button要素やp要素をクリックすることでonclick属性の値であるalert()の処理が実行されます。alert()は引数の文字列をアラート表示するJavaScriptの関数です。
一方で以下のようにJavaScriptで関数を定義しておきonclick属性で関数を指定して、実行させることも出来ます。
スクリプトが複数行にまたがったり、長くなる場合は関数にまとめた方が扱いやすくなります。
更にonclick属性を使ったサンプルコードを紹介していきます。
onclick属性を使ってクリックされた時に要素のテキストを変化させた例です。
下記の例ではonclick属性で関数を複数指定し、実行させています。
onclick属性はグローバル属性でHTMLの全ての要素で使えますが、注意点があります。
例えばクリックイベントの管理を別のJSファイルで行っている場合ではHTML中のonclick属性とJSファイル内でのクリックイベントの処理が両方あると管理が煩雑になります。
一般的にはJSファイルでイベント管理する方が多いためonclick属性を使わない方が好ましい場合もあります。
form要素の中でonclick属性を使うと効かない場合があります。下記のサンプルコードを見てみましょう。
上記のサンプルコードでは「送信」ボタンを押しても関数の処理が実行されません。
これはinput要素のname属性とonclick属性で指定した関数名が同じ場合には前者の方が指定されて、関数が実行されない事になります。
このようにフォーム内ではonclick属性の扱いには注意が必要です。