agregar escucha de eventos en elementos creados dinámicamente

¿Es posible agregar el detector de eventos (javascript) a todos los elementos generados dinámicamente? No soy el propietario de la página, por lo que no puedo añadir un oyente de forma estática.

Para todos los elementos creados cuando se carga la página utilizo: 

doc.body.addEventListener('click', function(e){
//my code
},true);

Necesito un método para llamar a este código cuando aparecen nuevos elementos en la página, pero no puedo usar jQuery (delegate, on, etc. no puede funcionar en mi proyecto). ¿Cómo puedo hacer esto?

Author: Damjan Pavlica, 2013-01-10
Source

5 answers

Parece que necesitas seguir una estrategia de delegación sin volver a una biblioteca. He publicado un código de ejemplo en un violín aquí: http://jsfiddle.net/founddrama/ggMUn /

Lo esencial es usar el target en el objeto event para buscar los elementos que le interesan y responder en consecuencia. Algo como:

document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // do your action on your 'li' or whatever it is you're listening for
  }
});

ADVERTENCIAS! El ejemplo Fiddle solo incluye código para los navegadores que cumplen con los estándares (es decir, IE9+, y prácticamente todos versión de todos los demás) Si necesita soportar "viejos IE" attachEvent, entonces usted querrá también proporcionar su propio envoltorio personalizado alrededor de las funciones nativas adecuadas. (Hay muchas buenas discusiones sobre esto; Me gusta la solución que Nicholas Zakas proporciona en su libro Professional JavaScript for Web Developers.)

 68
Author: founddrama,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-10 13:45:52

Depende de cómo agregue nuevos elementos.

Si agrega usando createElement, puede probar esto: 

var btn = document.createElement("button");
btn.addEventListener('click', masterEventHandler, false);
document.body.appendChild(btn);

Luego puede usar masterEventHandler() para manejar todos los clics.

 10
Author: ATOzTOA,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-10 13:28:26

He creado una pequeña función para agregar oyentes de eventos dinámicos, similar a jQuery.on().

Utiliza la misma idea que la respuesta aceptada, solo que utiliza el método Element.matches() para comprobar si el objetivo coincide con la cadena de selector dada.

addDynamicEventListener(document.body, 'click', '.myClass, li', function (e) {
    console.log('Clicked', e.target.innerText);
});

Puedes obtener if de github.

 1
Author: Cristy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-29 12:08:51

Delegar la tarea anónima a creada dinámicamente HTML elements por event.target.classList.contains('someClass')

  1. devuelve true o false

  2. Eg. let myEvnt = document.createElement('span'); myEvnt.setAttribute('class', 'someClass'); myEvnt.addEventListener('click', e => { if(event.target.classList.contains('someClass')){ console.log(${event.currentTarget.classList })}})

  3. Referencia: https://gomakethings.com/attaching-multiple-elements-to-a-single-event-listener-in-vanilla-js/

  4. Buena lectura: https://eloquentjavascript.net/15_event.html#h_NEhx0cDpml
  5. MDN : https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets
  6. Puntos de inserción:
 0
Author: Vipul Anand,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-30 11:22:44

Use la propiedad classList para enlazar más de una clase a la vez

var container = document.getElementById("table");
container.classList.add("row", "oddrow", "firstrow");
 -9
Author: Rakesh Gupta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-18 07:21:18