addEventListener는 for for 루프에서 작동하지만 for-in 루프에서는 작동하지 않습니다.

Question

for for 루프를 사용할 때 addEventListener는 for 루프에서 잘 작동합니다. 내가 루프에 대한-사용할 때

는하지만, 그것은

Uncaught TypeError: checklist[i].addEventListener is not a function

이 내 작품을 잘 코드처럼 오류가 있습니다.

var checklist = document.querySelectorAll(".checklist"); 
for (var i = 0, len = checklist.length; i < len; i += 1) { 
    checklist[i].addEventListener('change', function (event) { 
    alert('test'); 
    }); 
} 

이것은 내 오류 코드입니다.

var checklist = document.querySelectorAll(".checklist"); 
for (var i in checklist) { 
    checklist[i].addEventListener('change', function (event) { 
    alert('test'); 
    }); 
} 

나는 두 코드의 차이가 무엇인지 모른다. 도와주세요. 감사!

Answer 1

for-in 루프는 배열이나 개체의 모든 열거 가능한 속성을 반복합니다. 따라서 변수를 콘솔에 기록하면 요소의 색인과 함께 length, keys, values 및 checklist[length] 또는 checklist[keys]과 같은 다른 속성이 DOM 요소가 아닌 것을 볼 수 있습니다. 따라서 이벤트 리스너를 추가 할 수 없습니다.