Блог

Главная - Вопросы по программированию - deligation.addEventListener не является функцией — Почему

deligation.addEventListener не является функцией — Почему

#javascript

Вопрос:

     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);
    }

делигация содержит несколько списков узлов из DOM
ПОЭТОМУ я попытался

 for(let i=0; i<deligation.length; i  ){
        deligation.addEventListener('click', deligationFunc);
    }

Вместо
deligation.addEventListener('click', deligationFunc);

Однако это снова не сработало.

С другой стороны window.addEventListener('click', deligationFunc); , работает хорошо.

Я понятия не имею, что такое делигация.

Комментарии:

1. Ваш первоначальный способ мышления с циклом верен, но то, как вы с ним справляетесь, неверно. Поскольку вы используете цикл for, вам необходимо указать индекс элемента, к которому вы прикрепляете прослушиватель. Более простым подходом был бы цикл forEach() вместо этого.

Ответ №1:

Ваш первоначальный способ мышления с циклом верен, но то, как вы с ним справляетесь, неверно. Поскольку вы используете цикл for, вам необходимо указать индекс элемента, к которому вы прикрепляете прослушиватель. Вместо этого более простым подходом был бы forEach() цикл.

Использование 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) });
});

Использование для() :

 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) });
}

Ответ №2:

querySelectorAll() возвращает a NodeList (это похоже на массив), поэтому вам нужно получить доступ к его элементам по индексу. Измените свой код на:

 if (deligation.length) {
    deligation[0].addEventListener('click', deligationFunc);
}

Или, что еще лучше, и работает, если у вас есть более одного совпадающего элемента:

 for (const element of deligation) {
    element.addEventListener('click', deligationFunc);
}
Метки: