[Javascript] DOMのイベントバブル

こんばんわ。
バドミントンでヘロヘロなおじいさんです。運動はいいものですな。
この調子で、のんびりと仕事していきたいもんです。
さて、本題はDOMのイベントバブルです。

どういうものかというと、Javascriptのクリックイベントは、DOMの子から親へと伝搬していく事が出来ます。これが、イベントバブル(event bubbling)です。

まず、出典ですが、DOMのEventについての解説の、1.2.3節 Event bubblingがその説明にあたります。

 http://www.w3.org/TR/DOM-Level-2-Events/events.html

英語なんでめんどうじゃー、というのであれば、以下がもう何も付け加える事がないぐらいにわかりやすいです。

 http://www.geocities.jp/i96815/script/scr08.html

簡単にまとめれば、
 1.DOMのイベントは、子から親へと伝搬する
 2.どのイベントハンドラも、stopPropagation によって伝搬を止めることができる
という事になります。

で、一つ疑問が。
たとえば、普通DOMの構造は視覚的に見ると次のように入れ子になっているでしょう。

+-----------------+
|親DIV          |
|+---------------+|
||子DIV         ||
|+---------------+|
+-----------------+



以下の図のように、場所が離れていた場合、イベントは伝搬するのか??

+-----------------+
|親DIV          |
+-----------------+
+-----------------+
|子DIV          |
+-----------------+


実験開始。さきほどのページに掲載されていたHTMLを引っこ抜いて、liタグをsytleで別の場所へ飛ばします。

<html>
<body>
<div id="mydv" style="border:solid 1px">
    <ul id="myul" style="border:dotted 1px">
    <li id="myli" style="position:absolute; top:100; border:solid 1px">Click me!</li>
</ul>
</div>
<script type="text/javascript">
function click_handler1 (e) {
    alert('1 ' + e.target + ' bubbles=' + e.bubbles + ' ' + e.type);
}

function click_handler2 (e) {
    alert('2 ' + e.target + ' bubbles=' + e.bubbles + ' ' + e.type);
}

function click_handler3 (e) {
    alert('3 ' + e.target + ' bubbles=' + e.bubbles + ' ' + e.type);
}

document.getElementById("myli").addEventListener("click", click_handler1, false);
document.getElementById("myul").addEventListener("click", click_handler2, false);
document.getElementById("mydv").addEventListener("click", click_handler3, false);
</script>
</body>
</html>

あ、枠線はわかりやすくするためにつけました。
FF1.5以降でためしてください。

やってみた結果の結論。
バブルします。
つまりというか、そうかというか、DOM構造をさかのぼるだけで、視覚的に上から下へバブルしてるわけではありません。

なお、これらmydv系のDIVの上に、トップノードの子として作った別のDIVを貼り付けてやると、mydv系のDIVへはイベントが渡りません。

今回のイベントのバブルについてはこんな所で。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 1

なるほど(納得、参考になった、ヘー)

この記事へのコメント

この記事へのトラックバック