今日の話題は、JavaScript で少し複雑なことをしようと思ったときには、ぜひ知っておきたいことです。
基本なのですが、あまり入門書では紹介されていないことです。
今日のお題は 「イベントバブリング」 です。
イベントバブリングってなに？
例を挙げてご説明します。
これは、HTML としては、 document の上に、p ("A") があって、その中に span ("B") が入っている状態です。
つまり、階層構造としては、
document
↓
p "A"
↓
span "B"
となります。そして、それぞれに onclick イベント リスナーが設定されているとします。
この状態で、span "B" をクリックすると、
document のイベントハンドラ
↑
p "A" のイベントハンドラ
↑
span "B" のイベントハンドラ
という順番で呼び出されます。
階層構造の下から上へ上っていくことから、泡が上がっていくようなイメージで、イベントバブリング (Event Bubbling) といいます。
これの実験をするコードは次の通りです。
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
#p1 {
padding:5px;
background-color:#aaa;
color:#fff;
}
#s1 {
background-color:#eee;
color:#000;
padding:2px;
}
</style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
Event.observe(window,'load',window_onload);
function window_onload(evt){
Event.observe(document, 'click', document_onclick);
Event.observe('p1', 'click', p1_onclick);
Event.observe('s1', 'click', s1_onclick);
}
function document_onclick(evt){
alert('document');
}
function p1_onclick(evt){
alert('p1');
}
function s1_onclick(evt){
alert('s1');
}
</script>
</head>
<body>
<p id="p1"> A <span id="s1"> B </span> </p>
</body>
</html>
今日は、イベントバブリングの導入でした。 次回、この続きをもう少し書きたいと思います！