Есть такая верстка:
<div id="q"> 
    <div id="w"> 
        <div id="e">click</div> 
    </div> 
</div> 
И такой скрипт:
document.getElementById("q").addEventListener("click", on, false); 
document.getElementById("w").addEventListener("click", on, false); 
document.getElementById("e").addEventListener("click", on, false); 
function on(evt) { 
    alert(evt.target.id +" > "+ evt.currentTarget.id); 
} 
В Firefox и Opera при клике по слову "click" выведется:
1) e > e, e > w, e > q - сколько обработчиков, столько и алертов; target не меняется
2) e > e, w > e, q > e - currentTarget не меняется
3) e > e, w > w, q > q - target аналогичен currentTarget
4) e > e, e > w, e > q - обработка клика по #e, и 
w > w, q > q - обработка клика по #w, и 
q > q - обработка клика по #q
5) прошлый вариант (шесть алертов), но в обратном порядке (#q, #w, #e)
6) произойдет ошибка: для подобных целей следует использовать originalTarget и rangeParent
   
                                                                       Есть такая верстка:
<div id="q"> 
    <div id="w"> 
        <div id="e">click</div> 
    </div> 
</div> 
И такой скрипт:
document.getElementById("q").addEventListener("click", on, false); 
document.getElementById("w").addEventListener("click", on, false); 
document.getElementById("e").addEventListener("click", on, false); 
function on(evt) { 
    alert(evt.target.id +" > "+ evt.currentTarget.id); 
} 
В Firefox и Opera при клике по слову "click" выведется:
1) e > e, e > w, e > q - сколько обработчиков, столько и алертов; target не меняется
2) e > e, w > e, q > e - currentTarget не меняется
3) e > e, w > w, q > q - target аналогичен currentTarget
4) e > e, e > w, e > q - обработка клика по #e, и 
w > w, q > q - обработка клика по #w, и 
q > q - обработка клика по #q
5) прошлый вариант (шесть алертов), но в обратном порядке (#q, #w, #e)
6) произойдет ошибка: для подобных целей следует использовать originalTarget и rangeParent