鴨乃嘴南蛮: 実験「JavaScript のイベント伝播」

目的

JavaScript のイベント伝播を確認する。

<script type="text/javascript">
function handler( e ) {
    e = e ? e : event;
    alert( this.id );
    // e.cancelBubble = true;
}
function addHandler( el ) {
  document.getElementById( 'UL0' ).onclick = handler;
  document.getElementById( 'LI1' ).onclick = handler;
  document.getElementById( 'LI2' ).onclick = handler;
  document.getElementById( 'LI3' ).onclick = handler;
  document.getElementById( 'LI4' ).onclick = handler;
  el.style.visibility = 'hidden';
}
</script>
<button onclick='addHandler(this)'>実験準備</button>
<ul id="UL0">
  <li id="LI1">リストアイテム1</li>
  <li id="LI2">リストアイテム2</li>
  <li id="LI3">リストアイテム3</li>
  <li id="LI4">リストアイテム4</li>
</ul>

リストアイテム1
リストアイテム2
リストアイテム3
リストアイテム4

結果

browser	1	2
Firefox 1.07	LIx	UL0
Mozilla 1.7.12
Opera 8.51
Konqueror 3.5.0
IE 6.x

考察

主要ブラウザ 4種はすべて子要素→親要素の順でイベント伝搬していた。

やれやれ助かった。

いうまでもなく IE 6.x は参考出品、みそっかすです。同じ順序で良かったネ。IE7 での変更を禁じる。ここはいじるな > MIcrosoft