イベントをいろいろな場所に書いてみる
- - PR -
ここまではボタンに対してイベントを使いました。しかし、イベントは、さまざまなものに対して使うことができます。
例えば、Webページ全体にイベントを使うこともできます。この場合、HTMLの<body>タグにJavaScriptを書きます。
さっそくJavaScriptを書いて、サンプルをWebブラウザで動かしてみましょう。
<html>
<body onload="alert('いらっしゃいませ。')" onunload="alert('またどうぞ。')">
ようこそJavaScriptの世界へ<br>
</body>
</html>
onload（オンロード）は、HTMLが読み込まれたことをきっかけにするイベントです。onunload（オンアンロード）は、別のWebページに移動したり、Webページが閉じられたりしたことをきっかけにするイベントです。
onloadは、海外のWebサイトなどではポップアップ広告を出すのに使われていますが、本来はWebページが完全に読み込まれてから、JavaScriptを動かしたいときなどに使うのが正しい使用方法です。
便利なJavaScriptも使用方法によっては、ユーザーの反感を買うことになるので、注意しましょう。
また、最近は減りましたが、次のようなJavaScriptを使ったWebページを見かけることがあります。
<html>
<body oncontextmenu="alert('右クリック禁止！'); return false">
このページは右クリック禁止です。<br>
</body>
</html>
Windowsの右クリックで出るメニューのことをコンテキストメニューといいます。oncontextmenu（オンコンテキストメニュー）は、右クリックで出てくるメニューを表示したことをきっかけにするイベントです。
oncontextmenuは、WindowsのInternet Explorer、Firefox、Google Chromeでは有効ですが、Operaはoncontextmenuのイベントをサポートしていません。
このように、Webブラウザの種類やバージョンによってサポートしてるJavaScriptに若干の違いがあります。
Webブラウザによる違いは、JavaScriptを扱ううえで避けてとおれない問題なので、機会があれば解説したいと思います。しかし、この連載では当面、Internet Explorer 8を使用して解説をしていきます。
oncontextmenu=の中身を少し詳しく見てみましょう。alertで警告ダイアログを出した後に、;およびreturn falseと書かれています。
;（セミコロン）はJavaScriptの区切りです。複数のJavaScriptを書くときに、JavaScriptの終わりを;で区切ります。JavaScriptが1つしかない場合や、JavaScriptの最後には書かなくてもかまいません。
次のreturn falseを簡単に説明すると、起きたイベントをなかったことにしたいというときに使います。この場合、本来は「右クリックされたらコンテキストメニューを表示する」ところを、警告ダイアログを表示して、本来の「右クリックの動作をなかったこと」にしています。
このほかにもreturn falseの使い方として、<a>タグに対して、
<a href="http://www.google.com/" onclick="return false">リンクできない</a>
とすると、本来はリンクをクリックするとURLに移動するのに、リンクがクリックされたことを「なかったこと」にしてしまい、ページ遷移しないようにできます。
このreturn falseも、一見使い道がないように思いますが、覚えておくと大変役に立ちます。
右クリック禁止を禁止してみる
ところで、この右クリック禁止がうっとうしいという人多いですよね。そこで、JavaScriptを使って「右クリック禁止を禁止」してみましょう。
まずは、先ほどの右クリック禁止のサンプルを実行して、右クリックが禁止になっているのを確認ください。
さて、どのようにしたら、表示されているWebページのJavaScriptを上書きして、右クリック禁止を禁止できるでしょうか。
皆さんは、第1回の冒頭で紹介したブックマークレットを覚えているでしょうか。ブックマークレットは、Webブラウザのアドレスバーに直接JavaScriptを書き込んで実行するものです。
そう、ブックマークレットを使えば、表示されているWebページのJavaScriptを上書きできるのです！ 以下のスクリプトを1行でコピーして、Webブラウザのアドレスバーに張り付けてみてください。
javascript:alert('右クリック禁止を禁止！'); document.body.oncontextmenu=''; document.oncontextmenu=''; document.onmousedown=''; void(0)
右クリック禁止が禁止されて、コンテキストメニューが表示されるようになりましたか。このブックマークレットを使えば、多くの「右クリック禁止サイト」の右クリック禁止を禁止にできると思います。
サンプル以外でも、Webページで右クリック禁止を見つけたらこのブックマークレットを試してみてください。
3/4 |
| Index | |
| イベントで「右クリック禁止」を禁止してみよう | |
| Page1 ボタンを押すと何かが起きる？ サンプルを理解してみよう |
|
| Page2 いろいろなイベントを使ってみる |
|
| Page3 イベントをいろいろな場所に書いてみる 右クリック禁止を禁止してみる |
|
| Page4 ブックマークレットを理解しよう コピー＆ペーストを禁止してみる |
|
| 初心者のためのJavaScript入門 |
| Coding Edgeお勧め記事 |
| いまさらアルゴリズムを学ぶ意味 コーディングに役立つ！ アルゴリズムの基本（1） コンピュータに「3の倍数と3の付く数字」を判断させるにはどうしたらいいか。発想力を鍛えよう |
|
| Zope 3の魅力に迫る Zope 3とは何ぞや？（1） Pythonで書かれたWebアプリケーションフレームワーク「Zope 3」。ほかのソフトウェアとは一体何が違っているのか？ |
|
| 貧弱環境プログラミングのススメ 柴田 淳のコーディング天国 高性能なIT機器に囲まれた環境でコンピュータの動作原理に触れることは可能だろうか。貧弱なPC上にビットマップの直線をどうやって引く？ |
|
| Haskellプログラミングの楽しみ方 のんびりHaskell（1） 関数型言語に分類されるHaskell。C言語などの手続き型言語とまったく異なるプログラミングの世界に踏み出してみよう |
|
| ちょっと変わったLisp入門 Gaucheでメタプログラミング（1） Lispの一種であるScheme。いくつかある処理系の中でも気軽にスクリプトを書けるGaucheでLispの世界を体験してみよう |
|
TechTargetジャパン
- 実例で学ぶRailsアプリのテスト方法 （2011/12/22）
具体的なWebアプリを例に簡単なテストを使ったリファクタリングについ
て解説する - Railsの人気テストフレームワーク6選！ （2011/8/18）
今回からテストを使ったリファクタリングを解説する。まずはRailsで人
気のあるテストフレームワークをいくつか紹介する - ActiveRecordの更新系操作 （2011/6/27）
Railsのモデル層を担当するActiveRecordを使った登録、更新、削除
など、更新系の機能を中心に見ていきます - 実例アプリで学ぶ“Railsらしさ”の基礎 （2011/5/26）
Ruby on Railsで書かれた実例アプリを取り上げて、初心者が陥りがちなコードの書き方を指摘します。より「Railsらしい」コードとは？
|
|
キャリアアップ
スポンサーからのお知らせ
イベントカレンダー
お勧め求人情報
転職／派遣情報を探す
*＊先週の人気講座ランキング＊*
〜 Android編 〜
ホワイトペーパー（TechTargetジャパン）
著作権はアイティメディア株式会社またはその記事の筆者に属します。（著作権について）
当サイトに掲載されている記事や画像などの無断転載を禁止します。
「＠IT」「＠IT自分戦略研究所」「＠IT情報マネジメント」「JOB＠IT」「＠ITハイブックス」「＠IT MONOist」「ITmedia」「誠」「BARKS」は、アイティメディア株式会社の登録商標です。
当サイトに関するお問い合わせは「＠ITへのお問い合わせ」をご覧ください。