javascript - objeto - agregar el agente de escucha de eventos a los elementos creados dinámicamente

llamar funcion javascript html sin evento

Question

¿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 agregar un oyente de manera estática.

para todos los elementos creados cuando la página cargué uso:

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?

Answer 1

Depende de cómo agregue nuevos elementos.

Si agrega usando createElement , puede intentar esto:

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

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

Answer 2

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

La esencia de esto es usar el target en el objeto del 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
  }
});

¡CAVEATS! El ejemplo Fiddle solo incluye código para los navegadores compatibles con estándares (es decir, IE9 +, y prácticamente todas las versiones de los demás). Si necesita admitir el attachEvent "old IE''s", también querrá proporcionar su propio contenedor personalizado. las funciones nativas adecuadas. (Hay muchas buenas discusiones sobre esto, me gusta la solución que ofrece Nicholas Zakas en su libro JavaScript profesional para desarrolladores web ).

Answer 3

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

var container = document.getElementById("table");
container.classList.add("row", "oddrow", "firstrow");

Answer 4

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

Utiliza la misma idea que la respuesta aceptada, solo que usa el método Element.matches() para verificar 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 si de github .