addEventListenerは単純forループでは動作しますがfor-inループでは機能しません

Question

単純な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'); 
    }); 
} 

2つのコードの違いはわかりません。 私を助けてください。ありがとう！

Answer 1

for-inループは、配列またはオブジェクトのすべての列挙可能なプロパティに対してループを繰り返します。したがって、変数をコンソールに記録すると、要素のインデックスとともに、配列のlength,keys、values、checklist[length]またはchecklist[keys]のような他のプロパティもDOM要素ではないことがわかります。イベントリスナーを追加することはできません。