実験「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>

結果

browser12
Firefox 1.07LIxUL0
Mozilla 1.7.12
Opera 8.51
Konqueror 3.5.0
IE 6.x

考察

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

やれやれ助かった。

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


作成: 2006-01-13 21:15:19.0更新: 2006-01-13 21:15:19.0
http://museo-anonimo.jp/nanban/?id=110,http://museo-anonimo.jp/nanban/tr/110