onclick属性はユーザーが当該要素をマウスやノートパソコン等に付属しているトラックパッドなどポインティングデバイス（pointing device）の左ボタンで押した際（左クリックを実行した時）に起動するスクリプトを指定するイベント属性（イベントハンドラ）です。また、フォームのコントロール部品の中では Enter や Esc を押した場合にイベントが発生します。onclick属性の操作は指定された要素がフォーカスを得ることができない場合は Tab によるキーボード操作が無効のため、マウスやトラックパッドなどのポインティングデバイスでしか操作できないので使用する際には十二分に注意が必要です。
onclick属性は onkeypress属性とセットで使うことが求められています。これはポインティングデバイスがない環境における、マウスやトラックパッドの代わりにキーボードで操作することできるように配慮するためです。しかし、onkeypress属性を指定すると Tabでフォーカスを移動しているときに、Tab の押下に反応し、onkeypress属性のイベントを優先的に発生させてしまう実装をした UA もあります。このとき次の要素へフォーカスを移動しようにも、Tab の押下でイベントが発生してしまうと、その onkeypress属性が指定された要素以降にそのイベントによって移動出来なくなるという弊害もでてきます。
そこで、要素がフォーカスされている時は、キーボードの Enter でポインティングデバイスの左ボタンと同じ働きができるため、選択可能な状態（フォーカス）になる a要素, area要素、そしてフォームのコントロール部品である button要素, input要素, label要素, select要素, textarea要素に限っては onclick属性を指定していれば、特別、onkeypress属性を併せて指定する必要はありません。それ以外の要素には、現在どの UA もまだフォーカスを得ることができないので、ポインティングデバイスがない環境では onclick属性のイベントを発生させる操作を行うことができません。結論としては、実装に問題を抱えた UA もあるためポインティングデバイスがなくともフォーカス（選択状態）が可能な a要素, area要素, button要素, input要素, label要素, select要素, textarea要素の計7つの要素に関しては Tab と Enter で onclick属性のイベントを操作できるので、onkeypress属性を併せて指定する必要はなく、それ以外の要素には onclick属性を使用しないことをお奨めします。
また、onclick属性と同じ左ボタンの押下の動作によりイベントを発生させる属性に onmousedown属性, onmouseup属性があります。これらの属性を onclick属性と併せてひとつの要素に使用している場合、イベントは onmousedown属性→onmouseup属性→onclick属性の順に発生します。
次のスクリプトでは、プルダウンメニューから行き先を選択し、実行ボタンが押されると指定されたページにジャンプします。しかし、重要なナビゲーション部分をこのようなクライアントサイドスクリプトで提供してしまうと、JavaScript が利用できない・無効にしている環境では、利用できないので注意してください。
<script type="text/javascript">
function selectmenu(linkLoc) {
if(linkLoc !="") { window.location.href=linkLoc;} }
</script>
......
<form name="sample"><p>
Aからはじまる要素一覧: <select name="ListMenu">
<option selected="selected">選択してください</option>
<option value="a.html">a要素</option>
<option value="abbr.html">abbr要素</option>
<option value="acronym.html">acronym要素</option>
<option value="address.html">address要素</option>
<option value="applet.html">applet要素</option>
<option value="area.html">area要素</option></select>
<input type="button" value="実行"
onclick="selectmenu(document.sample.ListMenu.options
[document.sample.ListMenu.selectedIndex].value)">
</p></form>
次のスクリプトでは追加ボタンが押されると、セルと入力欄の行を追加していきます。
<script type="text/javascript">
function addRowTable() {
var tbl = document.getElementById('addition');
var lastRow = tbl.rows.length;
var increment = lastRow;
var row = tbl.insertRow(lastRow);
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(increment);
var cellRight = row.insertCell(1);
var control = document.createElement('input');
control.setAttribute('type', 'text');
control.setAttribute('name', 'input' + increment);
control.setAttribute('id', 'input' + increment);
control.setAttribute('size', '40');
cellLeft.appendChild(textNode);
cellRight.appendChild(control);
}
</script>
......
<p><input type="button" value="追加" onclick="addRowTable()">（入力欄を追加します）</p>
<table id="addition">
<tr><th colspan="2">行の追加生成</th></tr>
<tr>
<td>1</td>
<td><input type="text" name="input1" size="40" value=""></td>
</tr>
</table>