イベントで「右クリック禁止」を禁止してみよう：初心者のためのJavaScript入門（2）（2/4 ページ）
いろいろなイベントを使ってみる
onclickを使うと「ボタンがクリックされた」というイベントでプログラムを動かすことができます。
ほかにもJavaScriptでは色々なイベントが使えます。実際にJavaScriptを書き換えて、さまざまなイベントを起こして、どのように動くのかを体験してみましょう。
先ほどのサンプルコードを以下のように書き換えて、Webブラウザで表示させてみましょう。
<html>
<body>
<input type="button" value="ボタン"
onmouseover="this.value='マウスオーバー'" onmouseout="this.value='マウスアウト'">
</body>
</html>
このサンプルでは、ボタンにonmouseover（オンマウスオーバー）とonmouseout（オンマウスアウト）を使って、それぞれ、「マウスが重なったとき」と「マウスが外れたとき」をイベントとしてボタンの文字を変更しています。
ボタンにマウスが重なったとき
ボタンからマウスが外れたときHTMLでは基本的にクリックしか使えないのですが、JavaScriptを使えばもっと細かいボタンの状態をイベントとして使うことができます。
<html>
<body>
<input type="button" value="ボタン"
onmousedown="this.value='マウスダウン'" onmouseup="this.value='マウスアップ'">
</body>
</html>
ボタンを押したとき
ボタンを離したときマウスのボタンを押したままボタンからカーソルを離すと、表示がマウスダウンのままになります。逆に、ボタンの外でマウスのボタンを押したまま、カーソルをボタンに合わせてからボタンを離しても、表示がマウスアップになります。
普段あまり意識しないですが、こうして細かいイベントを比べてみると、クリックは同じボタンの上で連続してマウスダウンとマウスアップを行った時に起きるイベントだということも分かりますね。
また、onmousedownとonmouseupは、マウスの左ボタンと右ボタンを区別しません。試しにボタンの上でマウスの右ボタンを押したり離したりしてみてください。
Windowsの場合、右ボタンを押すとメニューが表示されてしまいますが、ボタンの表示も変わっていることが確認できたでしょうか（マウスボタンの左右どちらが押されたかを調べるJavaScriptもありますが、ちょっと難しいので今回は説明を省きます）。
このほかにも、あまり使う機会はないと思いますが、ダブルクリックもイベントとして使えます。
<html>
<body>
<input type="button" value="ボタン"
onclick="this.value='クリック'" ondblclick="this.value='ダブルクリック'">
</body>
</html>
ボタンをクリックしたとき
ボタンをダブルクリックしたときCopyright © ITmedia, Inc. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。