const deligation = document.querySelectorAll(".contents_box"); function deligationFunc(e){ let elem = e.target; console.log(elem); while(!elem.getAttribute('data-name')){ elem = elem.parentNode; if(elem.nodeName === 'BODY'){ elem = null; return; } } elem.classList.toggle('on'); } if(deligation){ deligation.addEventListener('click', deligationFunc); }la delegación tiene varias listas de nodos de DOM, así que lo intenté
for(let i=0; i<deligation.length; i++){ deligation.addEventListener('click', deligationFunc); } En lugar de deligation.addEventListener('click', deligationFunc);
Sin embargo, no estaba funcionando de nuevo.
Por otro lado window.addEventListener('click', deligationFunc); está funcionando bien
No tengo ni idea con delegacion.
Tu forma inicial de pensar con el bucle es correcta, pero la forma en que lo manejas es incorrecta. Dado que está utilizando un ciclo for, debe especificar el índice del elemento al que está adjuntando su oyente. Un enfoque más simple sería el bucle forEach() en su lugar.
Usando forEach() :
function deligationFunc(e){ let elem = e.target; console.log(elem); while(!elem.getAttribute('data-name')){ elem = elem.parentNode; if(elem.nodeName === 'BODY'){ elem = null; return; } } elem.classList.toggle('on'); } const deligation = document.querySelectorAll(".contents_box"); deligation.forEach(item => { item.addEventListener('click', e => { deligationFunc(e) }); });Usando para() :
function deligationFunc(e){ let elem = e.target; console.log(elem); while(!elem.getAttribute('data-name')){ elem = elem.parentNode; if(elem.nodeName === 'BODY'){ elem = null; return; } } elem.classList.toggle('on'); } const deligation = document.querySelectorAll(".contents_box"); for (let i = 0; deligation.length > i; i++) { deligation[i].addEventListener('click', e => { deligationFunc(e) }); }querySelectorAll() devuelve una lista de NodeList (es como una matriz), por lo que debe acceder a sus elementos por índice. Cambia tu código a:
if (deligation.length) { deligation[0].addEventListener('click', deligationFunc); }O, mejor, y funciona si tiene más de un elemento coincidente:
for (const element of deligation) { element.addEventListener('click', deligationFunc); }