¿Delegación de eventos de JavaScript, manejo de elementos primarios de elementos cliqueados?
http: //jsfiddle.net/walkerneo/QqkkA
He visto muchas preguntas aquí, ya sea preguntando o respondiendo con la delegación de eventos en javascript, pero aún no he visto cómo utilizar la delegación de eventos para elementos que no van a ser los objetivos del evento de clic .
Por ejemplo
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;
}
¿Qué pasa si quiero agregar un evento de clic para manejar elli
elementos cuando se hace clic? Si adjunto un controlador de eventos a laul
elemento, eldiv
s siempre serán los elementos objetivo. Además de verificar cada elemento primario del elemento de destino en una función de clic, ¿cómo puedo lograr esto?
editar
Quiero usar la delegación de eventos en lugar de:
var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
lis[i].onclick = function(){};
}
Pero si lo hago
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: No estoy interesado en cómo usar las bibliotecas Javascript para esta, Estoy interesado en cómo lo hacen y cómo se puede hacer con js puro.