Event Bubbling
es un mecanismo de manejo de evento que implementan los navegadores donde un evento que se propaga desde el elemento que ejecuto el evento(event.target), hasta el elemento mas lejano en la jerarquizar que disponga del mismo evento sin necesidad especificar el evento en el elemento en si.
Por ejemplo, aqui el evento clic esta definido en el ul
pero si damos clic sobre el li
, vemos como se ejecuta el evento y podemos obtener quien origino el evento por medio a Event.target y quien es el dueño del evento por medio a Event.currentTarget
:
function mostrar(e)
{
console.log(e.target);
console.log(e.currentTarget);
}
function agregarElemento()
{
var li = document.createElement("li");
li.innerText = "otro li";
document.getElementById("lista").appendChild(li);
}
li{
background:blue;
padding:4px;
}
<ul id="lista" onclick="mostrar(event)">
<li>li 1</li>
</ul>
<button onclick="agregarElemento()"> agregar li</button>
Notaste como tambien al agregar un elemento este lanza un evento clic aunque no se le haya asignado a el? Eso es bubbling. Bubbling ejecutara todos los eventos onclick de todos los elementos que sean padre del li hasta llegar al mas alto que es document
.
Asi que podemos sacarle provecho a este tipo de mecanisco con solo registrar nuestros delegados con el selector y hacer que al dar clic sobre un elemento hijo, se verifique si el selector es igual al elemento y si lo es, lanzamos el evento:
// lista de delegados
var delegados = [];
function mostrar(e)
{
for(var i = 0; i < delegados.length;i++)
{
// por cada delegado verificamos si el elemento si el `target` esta registrado como uno
if(e.target.classList.contains(delegados[i].selector))
{
// como lo esta, ejecutamos el delegado
delegados[i].callback();
}
}
}
function agregarElemento()
{
var li = document.createElement("li");
li.innerHTML = "otro li<button class='mi-boton'>Aqui funciona click</button><button> aqui no funciona</button>";
document.getElementById("lista").appendChild(li);
}
// registramos el delegado donde solo al que tenga la clase mi-clase se puede ejecutar el evento
delegados.push({selector: 'mi-boton', callback: function(){
alert('click sobre el boton!')
}})
li{
background:blue;
padding:4px;
}
<ul id="lista" onclick="mostrar(event)">
<li>li 1</li>
</ul>
<button onclick="agregarElemento()"> agregar li</button>
Nota como solo se ejecuta el evento sobre el boton que tenga la clase mi-clase
sin asignarle el evento onclick
directamente.
En la pregunta Diferencia entre Bubbling y Capturing respondi con a mas detalles como funciona Bubbling.