イベントで「右クリック禁止」を禁止してみよう：初心者のためのJavaScript入門（2）（2/4 ページ）

JavaScriptで本格的なプログラミングの世界に触れてみよう。連載を通じて実用的なアプリケーションを作れるようになるはず！？（編集部）

[小島尚基，有限会社インテレクトキューブ] PC用表示関連情報

LINE

Hatena

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

　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>

ボタンをクリックしたとき

ボタンをダブルクリックしたとき

イベントをいろいろな場所に書いてみる