前回はclass属性やid属性でDOMの操作対象要素を指定する方法について紹介しました。今回は、javascriptでDOMを利用する主な目的である、動的なページ書き換えの例を紹介します。javascriptでイベントを処理するHTMLのみでページを構成する場合、クリックに反応する要素はリンク(aタグ)や入力フォーム関連(inputタグ)など限られたものだけとなります。javascriptを用いることで、好きな要素にマウスのクリック(スマホのタップ)やキーボードの入力などを検出する機能を加えることができます。Webページでは、マウスのクリックやキーボードの入力などのことをイベントと呼びます。このイベントを検出して、それに応じた処理を行う機能のことをイベントリスナーもしくはイベントハンドラーと呼びます。今回は、クリックイベントに反応するpタグを作ってみましょう。要素がクリックされたことを検出するまず、実際に動くページの例を御覧ください。false);</script></html>サンプルの動作これをブラウザで実行した例です。文章をクリックすると、テキストが変化します。補足フェーズ)各引数について説明します。第1引数には、どの種類のイベントを検出するかを文字列で指定します。他にも指定できるイベントのタイプは数多くあります。代表的なものは以下のようなものです。mouseenter(マウスが重なったとき)mouseleave(マウスが要素の外に出たとき)mousemove(マウスが要素上で動いたとき)mousedown(マウスのボタンが押し込まれたとき)mouseup(マウスのボタンが離されたとき)dblclick(ダブルクリック)wheel(ホイールの回転など)その他のイベントの種類については以下のサイトを御覧ください。指定すれば、マウスが乗っただけで書き換えが行われます。false);...イベント検出時に呼ばれるメソッド(第2引数)第1引数で指定したイベントを実際に検出した場合に呼び出されるメソッドを第2引数に設定します。この例では、その時だけ使える無名関数を指定していますが、次のように、前もって作っておいたメソッドを呼び出すこともできます。useCapture)を設定します。した場合、HTMLの構造の下位から上位(子要素から親要素)の順に設定したイベントが処理されます。これをイベントのバブリングと呼びます。すると、HTMLの構造の上位から下位(親要素から子要素)の順にイベントが処理されます。これをイベントのキャプチャリングと呼びます。今回のサンプルのように、要素の重なりがない場合は特に意識する必要はありません。以下のようにクリックイベントに反応する要素が2つあり、一方が子要素であるという場合は、この値によってイベント処理の順番が変化します。false);</script></html>クリックに反応するdivタグが、クリックに反応するpタグを子要素に持つという構造になっています。子要素となっているpタグをクリックした場合の挙動に違いが出ます。場合、イベントバブリングとなり、子要素のイベントが先に実行されます(サンプルの画面下のコンソールに現れるメッセージの順番に注目してください)。場合、イベントキャプチャリングとなり、親要素のイベントが先に実行されます。true);このように、イベントが他の要素に伝わっていくことをイベントの伝搬と呼びます。複雑なWebアプリケーションを作成する場合には意識する必要があります。要素にイベントを付加することができます。文献によっては、イベントを要素に付加する際に以下の書き方をしているものがあります。クリック時の処理};これは、イベントリスナーを登録する古い方法です。MDN利点としては、古いブラウザにも対応しているという点が挙げられますが、細かい調整ができないという不都合もあります。方でイベントリスナーの登録を行ってください。仕様化された、イベントリスナーを登録するための方法です。その利点は以下の通りです。以上のハンドラを追加することができます。