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.