イベントのバブリングとキャプチャリングここで最後に説明していくのは、滅多には遭遇しませんが、理解できていないととても苦痛になるかもしれない事柄です。ある一つの要素で同じイベントに紐付く二つのハンドラが活性化された時に何が起きるのかを説明するのが、イベントのバブリングとキャプチャリングという二種類のメカニズムです。表示したり隠したりするとても簡単な例です。変更するので、ビデオが表示されます(例のCSSにこの二つのクラスが含まれており、それぞれはボックスの位置をスクリーンの外、内にします)。<video>にです。領域がクリックされた時にはボックスがまた隠れるようにし、ビデオそのものがクリックされたらビデオが再生されるようにしたいというわけです。今度はビデオをクリックすると再生が始まりますが、それと同時に<div>が隠されるようになってしまいました。中にあるので(ビデオはdivの一部ですから)、ビデオのクリックは上に挙げた両方のイベントハンドラーを実際に動かします。キャプチャリングする段階とバブリングする段階です。イベントハンドラーがキャプチャリング段階に登録されているか調べ、あればそれを実行します。要素の内側の要素に移って同じ事をし、また次の内側の要素にと、実際にクリックされた要素に到達するまで繰り返されます。バブリング段階では、全く逆の事が起きます。イベントハンドラがバブリング段階に登録されていれば、それを実行します。要素に到達するまで繰り返します。(大きな図を見るにはクリックして下さい)モダンブラウザーのデフォルトでは、全てのイベントハンドラーはバブリング段階に登録されます。ハンドラーがあるので実行し、最初ビデオが始まります。videoBox.onclick...ハンドラーがあるので実行し、よってビデオも隠されます。標準的なイベントオブジェクトにはstopPropagation()という関数があって、ハンドラーのイベントオブジェクトで起動されると、このハンドラーは実行されますが、イベントが上位に伝播しないようにするので、これ以上のハンドラーは実行されなくなります。(こちらでソースコードも見られます)。それはね、むかーしむかしの悪き時代、ブラウザーに今ほど互換性がなかった頃、ネットスケープはキャプチャリングだけを、IEはバブリングだけを使っていたのさ。動作について標準化と合意を作ろうと決めた時、結局どっちもシステムに入れることにし、モダンブラウザーはそのように実装されたのさ。上で述べたように、デフォルトでイベントハンドラはバブリング段階に登録され、そしてほとんどの場合はこれが妥当です。指定すれば実現できます。イベント移譲という概念は、たくさんある子要素のどれかしらがクリックされた際に何らかのコードを実行したいという場合に、個々の子要素一つ一つにイベントリスナーを設定するのではなく、親要素のイベントリスナーを設定すれば子要素のイベントリスナーからバブリングしてくるという事実に依拠しています。イベントリスナーに設定すれば、イベントはリストアイテムからバブリングしてきます。ブログで、たくさんの例とともに解説されています。イベントについて、今の学習初期段階で知るべき事は全部わかったはずです。