12

Estoy realizando una página web en la que se va a ir añadiendo contenido de forma dinámica. Me gustaría añadir controladores de eventos a los nuevos elementos que se van añadiendo al DOM.

La cosa es que los nuevos elementos que se añaden no se crean con JavaScript (en cuyo caso sería sencillo asociar el controlador en cuanto se creen) sino que vienen ya como HTML como respuesta a una petición AJAX (lo que complica esa asociación de eventos).

En jQuery podría fácilmente usar eventos delegados (referencia 1 y 2):

$("#contenedor").on("click", ".elemento", function(e) {
  e.preventDefault();
  ...
});

...el problema es que no estoy utilizando jQuery ni ninguna otra librería/biblioteca de JS. Entonces mi pregunta es: ¿cómo hacer algo similar en JavaScript puro? ¿Cómo crear eventos delegados?

1

4 respuestas 4

14

Para esto ocupas la delegación de eventos, donde dentro de la función identificas cual fue el objetivo del click, ya sea por id o por clase o por etiqueta según sea tu necesidad

document.addEventListener('click',function(e){
    if(event.target.tagName.toLowerCase() === 'div'){
        //TODO
    }
});

Te dejo un ejemplo funcionando creando elementos de manera dinámica, donde se aplica el evento clic a dichos elementos

var i = 1;
document.getElementById('creator').addEventListener('click',function(){
  var div = document.createElement('div');
  var text = document.createTextNode('New Div ' + i);
  div.appendChild(text);
  document.body.appendChild(div);
  i++;
});
document.addEventListener('click',function(e){
    // Fixed
    if(e.target.tagName.toLowerCase() === 'div'){
        console.log(e.target);
    }
 })
<div>
  Div actual
</div>
<button id='creator'>Crear</button>

5

puedes usar addEventListener

window.onload = function() {

  var nodo = document.getElementById("c");

  nodo.addEventListener("click", f1);


}

function f1() {

  console.log("has pulsado en el boton C");
}
<div id="c">hola</div>

con eso el html tiene un nuevo listener hasta que se lo elimine con:

document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
4
  • 1
    ¿funcionaría si añado elementos más tarde? Por ejemplo, si hay un botón que es "cargar más" y se pulsa después de cargada la página.
    – Alvaro Montoro
    Commented el 20 oct. 2017 a las 14:08
  • @AlvaroMontoro si funcionaria, ya que ese evento tiene el nodo, hasta que se destruya Commented el 20 oct. 2017 a las 14:10
  • 1
    No me termina de funcionar. Voy a editar la pregunta con un ejemplo con tu código si está bien. Quizás el problema es que no lo estoy haciendo bien porque estoy usando clases en lugar de IDs
    – Alvaro Montoro
    Commented el 20 oct. 2017 a las 14:23
  • 1
    Iba a editar la pregunta, pero Lixus respondió, probé su propuesta y funciona.
    – Alvaro Montoro
    Commented el 20 oct. 2017 a las 14:35
5

Una opcion utilizando ECMAScript 6

class Listener {
  
  constructor(id, texto) {
    this.id = id;
    this.texto = texto;
    this.element = document.getElementById(id);
    this.element.addEventListener("click", (e) => { this.onClick(e); });
    this.element.addEventListener("mouseover", (e) => { this.onMouseOver(e); });        
  }
  
  onClick(evt) {
    this.element.innerHTML +=this.texto;
    console.info("onClick: this = %o", this.element);
  }
  onMouseOver(evt) {
    console.info("MouseOver: this.id = %o", this.id);
  }
}
new Listener('tal' ,"<p>mi texto a agregar</p>");
<div id="tal" style="background-color:#F5F5DC"> Mantequilla NoJutsu</div>

El ejemplo modo funcional, en el click puedes colocar las validaciones que tu necesites, ademas puedes recorrer los div que quieres agregar el listener y anexarlos sin problemas

4

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.