e.preventDefault() と e.stopPropagation()まとめ

シンプルにまとめたいと思いますが・・・

<div id="box">
    <div id="boxInner">
        <a href="#">ああ</a>
    </div>
</div>
<script>
document.getElementById("box").addEventListener("click", clickHandler, false);
document.getElementById("boxInner").addEventListener("click", clickHandler, false);
document.getElementsByTagName("a")[0].addEventListener("click", clickHandler, false);
function clickHandler(e){
    // e.preventDefault();
    // e.stopPropagation();
    alert(e.currentTarget.tagName);
}
</script>

イベント伝播が全て終わってから、ブラウザデフォルト挙動が始まる

カンチガイしてましたよ。「×要素ごとに、ブラウザ挙動をこなす」じゃないんですね。「○伝播終了⇒ブラウザ挙動」。上の例だと、「A」「DIV」「DIV」とアラートされたあとに、href="#" リンク（ページトップに行く）が発動されます。

そこで、「e.preventDefault()」

イベント伝播のみで、終了させる。ブラウザ挙動をprevent（はばむ）するわけですね＜英辞郎

「e.stopPropagation()」は、反対に

伝播のみがキャンセルされます。上の例で「e.stopPropagation()」をオンにすると、「A」とアラートがあった直後にhref="#" が発動されます。

なんか・・・

むかし、どこかで「ieはバブリング（イベントの伝播順序）が逆だ」って読んだことがあった気がしたけど・・・ie6とie8でチェックしても、ちゃんと上から伝播してた。曖昧な記憶！危険！