이벤트 등록을 위해 JavaScript에서 HTML 목록 항목 객체를 올바르게 참조하십시오.

Question

예를 들어 다음 HTML 목록이있는 경우 목록 항목 객체를 참조하는 방법을 알고 싶습니다.

<div id="subdiv_2">  
 <div id="subdiv_3">  
  <ul>  
   <li><a href="">Item1</a></li>  
   <li><a href="">Item2</a></li>  
   <li><a href="">Item3</a></li>    
  </ul>  
 </div>  
</div>  

고유 한 요소가 필요하지 않고 Item2 Li에 onclick을 등록 할 수있는 방법은 고유 한 ID가 있고 목록에 없기 때문에 SubDIV_3에 대해 그렇게 할 수 있습니다.

document.getElementById('subdiv_3').addEventListener('click', function();, false);

내 목표는 궁극적으로 목록 개체 번호를 기반으로 고유 한 매개 변수를 가진 목록 개체 수에 대해 각 목록 개체에 함수를 할당하는 것입니다.

for(i=0;i<list.length;i++){  
 "document.getElementById(list.item"+i+").addEventListener(\'click\',function("+i+");,false);";  
}

Answer 1

당신은 모든 아이들의 요소를 얻을 수 있습니다 subdiv_3 그것은 <li>. 그런 다음 해당 루프를 통해 반복하여 기능을 추가하십시오.

div = document.getElementById('subdiv_3');
els = div.getElementsByTagName('li');

for (var i=0, len=els.length; i<len; i++) {
    alert(i);  // add your functions here   
}

코드 샘플을 살펴보면, 루프에있을 때 기능을 만들면 폐쇄 범위 문제가 발생할 수 있습니다. (모든 함수는 동일한 값의 I의 값을 사용하는 것으로 보입니다.)이 질문에 대한 내 대답을 확인하여 해당 문제를 처리합니다. JavaScript의 요소 배열에 인수가있는 이벤트 핸들러를 추가하는 방법은 무엇입니까?

Answer 2

@SuperNovah : 실제로 실제 기능을 할당 할 수 있습니다. setTimeot(). 그것은 문자열 형식을 제거합니다. 하나의 속성을 설정하는 것보다 더 복잡한 일을하고 싶을 때 당신의 방해가됩니다.

이것은 코드입니다.

function attachToList() {
  var div = document.getElementById('menu2');
  var els = div.getElementsByTagName('li');
  // create a closure returning an anonymous inner function
  var fn  = function(li) {
    return function() {
      li.style.backgroundColor = "#FFFFCC";
    };
  };
  for (var i=0, len=els.length; i<len; i++) {
    // create function instance suitable for current iteration
    var changeLi = fn(els[i]);
    // pass function reference to setTimeout()
    setTimeout(changeLi, 250*i);
  }
}

그리고 짧은 설명 :

사용 a 폐쇄 언제 확인하는 트릭입니다 setTimeout() 트리거, 모든 변수에는 여전히 예상 값이 있습니다.

함수를 반환하는 함수를 작성하여이를 수행합니다. 외부 함수는 매개 변수를 가져오고 내부 기능은 그렇지 않습니다. 그러나 그것은 참조 외부 기능의 매개 변수에. 루프에서는 외부 기능 (올바른 매개 변수 포함)을 호출하고 매개 변수 값의 자체 버전이있는 완전히 새로운 내부 기능을 얻습니다. 이것은 당신이 할당 한 것입니다 setTimeout().

Answer 3

Benry의 Benry의 답변에 대한 의견을 반대로, 그의 코드를 사용한 후, 다음은 각 ElementLi가 ELS [i]와 참조 할 수 있음을 증명합니다.

function attachToList(){
div = document.getElementById('menu2');
els = div.getElementsByTagName('li');
for (var i=0, len=els.length; i<len; i++) {
setTimeout('els['+i+'].style.backgroundColor=\"#FFFFCC\";',(250*i));
}
}