1

Lo que pretendo es añadir el evento mouseenter a todos los elementos del documento que contengan el atributo data-label, pero claro estos elementos puede que no existan al cargar el DOM ya que puede que se creen en un momento indeterminado, lo que he estado intentando hasta el momento es lo siguiente:

var dataLabels = document.querySelectorAll('*[data-label]');

dataLabels.forEach((item,index) => {
	
  item.addEventListener("mouseenter",function() {
  	console.log(this.getAttribute("data-label"));
  });

});
<button data-label="Desripción botón 1">Button1</button>
<button data-label="Descripción botón 2">
Button2</button>

Hasta aquí todo bien, pero cómo podría añadir este evento a futuros elementos que se vayan a crear que tengan este atributo, lo lógico sería que cuando esos elementos se crean que se les añada ese evento, pero no quiero hacer eso. Por lo tanto pensé que lo mejor sería añadir un evento al DOM cuando se produjera un cambio en él, y repasar otra vez todos los elementos con el atributo data-label, pero claro si este elemento ya tiene añadido este evento se lo estaría añadiendo de nuevo, lo cual provocaría una repetición de n veces no deseada de la misma función.

Gracias de antemano por cualquier ayuda posible.

NOTA: no quiero usar jQuery, solo puro JavaScript.

2
  • No se mucho de javascript y recuerdo solo un poco de DOM, pero que tal si intentas cargar todos tus elementos en un arreglo y los identificas. El arreglo contendrá las descripciones. Cuando el DOM se actualize ejecutas la función que contiene todos los elementos ya cargados (Creo que solo ocuparas la descripción puesto que esta no se repetira). Compruebas si esta guardado, si lo esta, no haces nada pero, si no lo esta agregas el evento.
    – Legna
    Commented el 19 ago. 2017 a las 17:54
  • @RafaelAngelRamirezEstrada creo que no has entendido bien lo que pretendo
    – lromeraj
    Commented el 19 ago. 2017 a las 18:39

1 respuesta 1

1

Podrías poner una clase como bandera, para no volver a asignar el evento

var dataLabels = document.querySelectorAll('*[data-label]:not(.evento-asignado)');

dataLabels.forEach((item,index) => {
  item.className += " evento-asignado";
  item.addEventListener("mouseenter",function() {
  	console.log(this.getAttribute("data-label"));
  });

});
<button data-label="Desripción botón 1">Button1</button>
<button data-label="Descripción botón 2">
Button2</button>

1
  • Gracias por la aportación Andrés pero no me vale tu "solución"
    – lromeraj
    Commented el 19 ago. 2017 a las 17:34

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.