連載
» 2010年01月07日 00時00分 公開

初心者のためのJavaScript入門(2):イベントで「右クリック禁止」を禁止してみよう (2/4)

[小島尚基,有限会社インテレクトキューブ]

いろいろなイベントを使ってみる

 onclickを使うと「ボタンがクリックされた」というイベントでプログラムを動かすことができます。

 ほかにもJavaScriptでは色々なイベントが使えます。実際にJavaScriptを書き換えて、さまざまなイベントを起こして、どのように動くのかを体験してみましょう。

 先ほどのサンプルコードを以下のように書き換えて、Webブラウザで表示させてみましょう。

<html>
  <body>
    <input type="button" value="ボタン"
      onmouseover="this.value='マウスオーバー'" onmouseout="this.value='マウスアウト'">
  </body>
</html>

 このサンプルでは、ボタンにonmouseover(オンマウスオーバー)onmouseout(オンマウスアウト)を使って、それぞれ、「マウスが重なったとき」と「マウスが外れたとき」をイベントとしてボタンの文字を変更しています。

サンプル3 ボタンにマウスが重なったとき
サンプル4 ボタンからマウスが外れたとき

 HTMLでは基本的にクリックしか使えないのですが、JavaScriptを使えばもっと細かいボタンの状態をイベントとして使うことができます。

<html>
  <body>
    <input type="button" value="ボタン"
      onmousedown="this.value='マウスダウン'" onmouseup="this.value='マウスアップ'">
  </body>
</html>
サンプル5 ボタンを押したとき
サンプル6 ボタンを離したとき

 マウスのボタンを押したままボタンからカーソルを離すと、表示がマウスダウンのままになります。逆に、ボタンの外でマウスのボタンを押したまま、カーソルをボタンに合わせてからボタンを離しても、表示がマウスアップになります。

 普段あまり意識しないですが、こうして細かいイベントを比べてみると、クリックは同じボタンの上で連続してマウスダウンとマウスアップを行った時に起きるイベントだということも分かりますね。

 また、onmousedownとonmouseupは、マウスの左ボタンと右ボタンを区別しません。試しにボタンの上でマウスの右ボタンを押したり離したりしてみてください。

 Windowsの場合、右ボタンを押すとメニューが表示されてしまいますが、ボタンの表示も変わっていることが確認できたでしょうか(マウスボタンの左右どちらが押されたかを調べるJavaScriptもありますが、ちょっと難しいので今回は説明を省きます)。

 このほかにも、あまり使う機会はないと思いますが、ダブルクリックもイベントとして使えます。

<html>
  <body>
    <input type="button" value="ボタン"
      onclick="this.value='クリック'" ondblclick="this.value='ダブルクリック'">
  </body>
</html>
サンプル7 ボタンをクリックしたとき
サンプル8 ボタンをダブルクリックしたとき

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。