http: //jsfiddle.net/walkerneo/QqkkA

Vi muitas perguntas aqui perguntando sobre ou sendo respondidas com delegação de eventos em javascript, mas ainda estou para ver, no entanto, como usar a delegação de eventos para elementos que não serão os destinos do evento click .

Por exemplo

HTML:

<ul>
    <li><div class="d"></div></li>
    <li><div class="d"></div></li>
    <li><div class="d"></div></li>
    <li><div class="d"></div></li>
    <li><div class="d"></div></li>
    <li><div class="d"></div></li>
</ul>​

CSS:

ul{
    padding:20px;
}
li{
    margin-left:30px;
    margin-bottom:10px;
    border:1px solid black;

}
.d{
    padding:10px;
    background:gray;
}
​

E se eu quiser adicionar um evento de clique para lidar com oli elementos quando são clicados? Se eu anexar um manipulador de eventos aoul elemento, odivs sempre serão os elementos de destino. Além de verificar todos os pais do elemento de destino em uma função de clique, como posso fazer isso?

editar

Eu quero usar a delegação de eventos em vez de:

var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
    lis[i].onclick = function(){};
}

Mas se eu fizer:

document.getElementsByTagName('ul')[0].addEventListener('click',function(e){

    // e.target is going to be the div, not the li
    if(e.target.tagName=='LI'){

    } 
},false);

EDIT: Não estou interessado em como usar bibliotecas Javascript para este, Estou interessado em como eles fazem isso e como isso pode ser feito com js puro