検索
連載

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

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

PC用表示 関連情報
Share
Tweet
LINE
Hatena

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

 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.

ページトップに戻る