次のページイベントは、あなたがプログラムを書いているシステムで生じた動作、出来事を指します。システムからあなたへ、イベントとして何かあった事を知らせてくるので、必要であればそれに何らかの反応を返す事ができます。ページ上でボタンを押したとき、ある情報を表示するように反応させたいと思うかもしれません。この記事では、イベントに関する重要な概念を取り上げ、ブラウザーの中でのイベントの振る舞いを見ていきます。ここでは、全てを説明するのではなく、この段階で知っておくべき内容を取り上げます。前提条件:コンピュータに関する基本的な知識があること。第一歩の記事を理解していること。目的:イベントの基本的な理論を理解すること。ブラウザーでの振る舞いを理解し、プログラミング環境が変わると、イベントの振る舞いが変わることを理解すること。あなたがプログラムしているシステムの中で生じた動作や出来事です。あるイベントが起きたときに、システムはある種の信号を発します。ある種のアクションが自動的に実行されるためのメカニズムも提供します。例え話で考えてみましょう。空港の滑走路で、飛行機が離陸できる状態にあるときに、信号がパイロットに送られます。その結果、パイロットは飛行機を操縦します。文書、ブラウザー画面全体といったものです。発生するイベントは多種多様な種類があります。リファレンスを覗いてみれば、とてもたくさんの応答可能なイベントがあるのが判るでしょう。コードのブロックのことです。イベントの発火に対する応答としてコードのブロックが実行されるように定義する事を、イベントハンドラを登録すると言います。呼ばれる事を付記しておきます—我々の目的から見ると言い変えてもほとんど問題ないのですが、厳密に言えば一緒に動作する別のものです。イベントリスナーはイベントの発生を監視し、イベントハンドラーは発生したイベントの応答として動作するコードです。APIの一部として定義されたものです。簡単な例ここで何を言ってるのか説明するため、簡単な例を見てみましょう。このコースでこれまでに例の多くに使われているイベントやイベントハンドラーを見てきました、しかし、知識を固めるために整理をしましょう。関数を使って取得したボタンへの参照を格納しています。それとは別にランダムな数値を返す関数も定義しています。コードの3つ目の部分はイベントハンドラーです。要素を指していますが、この種のオブジェクトにはたくさん発火し得るイベントがあるので、色々なイベントハンドラーが使えます。onclickイベントハンドラプロパティに、ランダムなRGB色を生成し<body>の背景色を設定するコードを抱えた匿名関数を代入する事で、クリックイベントが発火されるのを待ちかまえます。要はユーザーがクリックしたらいつでも。方式とは異なっています。イベントモデルと異なっています。ような関数を使っていきます。使い方の良い例を教えてくれます。関数で結び付ける必要があります。学習の今の段階で、そのような他の環境について何か理解する必要はありません。イベントは異なるプログラミング環境では異なることがあるとだけ認識してください。ページに追加する方法はいろいろあります。このセクションでは様々なメカニズムを見ていき、どれを使うべきなのか議論していきます。イベントハンドラープロパティイベントハンドラコードを代入するためのいろいろなプロパティがあり、そういったものをここまでのコースで最もたくさん見てきました。上記の例に戻りましょう。プロパティがこの例で使用されているイベントハンドラープロパティです。btn.style)のうちの1プロパティに過ぎませんが、特別な種類のものです(コードを代入すると、そのコードはボタンでイベントが発火した際に実行される)。設定することもできます。bgChange;利用できるイベントハンドラープロパティにはとてもたくさんの種類があります。ローカルコピーを作成し、ブラウザーで開いて下さい。これはこの記事ですでに遊んだ簡単なランダム色のサンプルです。ボタンがフォーカスされフォーカスが外れる(Tabキーをパチパチして、ボタンをフォーカスしたり外したりしてみて)と色が変わります。これらはフォームのフィールドがフォーカスされている時にフィールドに何を入れたらいいのか示したり、フィールドの入力が終った直後に入力として正しくない値が入っている際のエラーメッセージを表示するような場合によく使われます。ダブルクリックされた場合だけ色が変わります。キーボードのキーが押された時に色が変わります。keypressは普通のキー入力(ボタンを押して離して)を示しますが、keydownとkeyupはキーストロークのうち押すだけ、離すだけの部分それぞれを指します。windowオブジェクトに登録しなければならず、これはブラウザーのウィンドウ全体を表わしています。マウスポインタがボタンの上に来たときとボタンの上から外れた時に色が変わります。<video>のような特定の要素でのみ意味を持ちます)。(また、こちらで実際に動くところを見られます)。属性値がイベント発生時に実行したいJavaScriptコードそのものです。上の例では<script>要素の中で定義された関数を起動していますが、直接JavsScriptそのものを属性の中に入れる事もできます。いうのは悪い方法とみなされています。した事を手早く片づけたい時、イベントハンドラー属性を使うのが簡単に思えるかもしれませんが、あっという間に手がつけられない、効率の悪いものになってしまいます。一ヶ所にまとめる方が良いです。別の一つのファイルになっていれば、それを複数のHTMLドキュメントに適用できますから。(HTMLとJavaScriptが)一つのファイルになっているとしても、インラインイベントハンドラーは良いアイデアではありません。ファイルに100の属性を追加したならば、あっという間に管理していくのは悪夢と化す事でしょう。プログラムロジックをコンテンツから分離しておくと、あなたのサイトはサーチエンジンにとってより好ましいものになります。addEventListener()です。この関数はイベントハンドラプロパティと同じ方向性ですが、文法は明確に異なります。(また、こちらで実際に動くところが見られます)。ハンドラーを登録したいイベントの名前と、それに反応して実行させたいコードを含んだ関数です。関数の引数に書いてしまっても全く問題ありません。rndCol;});この方式は、ここまでで見てきた古い方式に勝る点がいくつかあります。removeEventListener()があり、以前に追加したリスナーを削除できます。bgChange);単純で小さなプログラムではたいした事ありませんが、大きくて複雑なプログラムでは、古く使われないイベントハンドラを除去しておくと効率が良くなります。適切なイベントハンドラを追加したり削除するだけで良いのです。第二に、同じリスナーに複数のハンドラーを登録できます。functionB;二行目で最初に設定したonclickの値が上書きされるからです。functionB);要素がクリックされると、どちらの関数も走ります。この方式ではもっとたくさんのパワフルな機能やオプションが使えます。リファレンスページを見て下さい。前に書いたように、時代遅れで悪いやり方です。他の二つはまあまあどっちでも良いです、少なくとも単純な用途では:イベントハンドラープロパティーは力とオプションに欠けますが、ブラウザー間での互換性が高いです(IE8ですら動きます)。学習を始めるならここから始めるのが良いかもしれません。DOMレベル2イベント(addEventListener()他)はもっとパワフルですが、もっと複雑でちょっと互換性に欠けます(IE9以降でサポート)。こちらも試していき、可能なところではこちらを使えるようになりましょう。関数でイベントハンドラコードを削除できる事、必要なときは要素に同種のリスナーを複数追加できる事です。別の関数を第二引数に指定して何回か呼ぶ事ができます。これはイベントハンドラプロパティでは、プロパティは後からセットした値で上書きされてしまうので、できません。仕事でIE8より古いブラウザーをサポートするよう言われているなら、そのような古代のブラウザーは新しいものとは違ったイベントモデルを使っているため、困難にぶつかるかもしれません。jQuery)には、ブラウザ間の差異をとっぱらえる関数が備わっています。勉強中のあなたがこの点について心配しすぎる必要はありません。その他、イベントに関する概念このセクションでは、イベントに関連するより進んだ概念について軽くさらっていきます。今の時点で完全に理解する必要があるほど重要ではありませんが、ときどき見かけることになるであろうコードのパターンがなぜそうなっているのか、理解する助けになるかもしれません。名付けられた引数を見かけるかもしれません。これらはイベントオブジェクトと呼ばれ、イベントの追加機能や情報を提供する目的でイベントハンドラに自動的に渡されます。こちらで実際に動くところが見れらます)。背景色スタイルを設定しているのがわかるでしょう。プロパティは、常にイベントが生じた要素への参照となっています。この例ではページではなくボタンの背景色がランダムに変わります。イベントハンドラ関数のカッコの中に使いたい名前を書くだけです。開発者の間でとても良く使われていますが、これらが短くて覚えやすいからです。標準に従うのはいつだって良いやり方です。複数の要素に同じイベントハンドラを割り当てて、どれかでイベントがあったときに何かさせたいような場合、e.targetはとてつもなく有用なものです。複数の要素に同じイベントハンドラを割り当てて、どれかでイベントがあったときに何かさせたいような場合、e.targetはとてつもなく有用なものです。クリックすると見えなくなるタイルが16個あるとします。e.targetを使ってそれをただ消せるなら、もっと難解な手段で選びだすのよりも使いすいでしょう。要素をJavaScriptで生成します。</body></html>あなたが使うであろうイベントハンドラーのほとんどでは、イベントオブジェクトには標準的なプロパティと関数(メソッド)(Eventを参照して下さい)だけがあります。上級者向けハンドラーでは、動作に必要な追加データを保持するために特殊なプロパティを付与するものもあります。イベントがあり、オーディオやビデオの録音や再生が終わって何か(保存したり再生したり)する準備ができたところで発火します。プロパティがあり、これを使って何かしらを行なえます。標準の動作を抑制するときにはイベントに付随する標準動作を止めたい場合があるでしょう。フォーム、例えばカスタマイズした登録フォームです。詳細を入力し終えてサブミットボタンを押した時、普通の動作ではデータがサーバの指定のページに送られて処理され、ブラウザーは"成功しました"ページにリダイレクトされたりなんやらします。開発者としてあなたはサーバへのデータ送信を抑止し、どこに問題があってデータを適切なものにするにはどうすればいいのか示す、ユーザーへのエラーメッセージを表示したいことでしょう。ブラウザーの中にはフォームデータの自検証機能を備えたものもありますが、多くはないので、それには頼らず自前の検証機能を実装すべきです。簡単な例を見てみましょう。イベントハンドラー(フォームがサブミットされるとサブミットイベントが発火します)の中で、テキストフィールドが空かどうかテストするだけのとても簡単なチェックを実装します。