javascript 두 개의 다른 요소에 대한 addEventListener 충돌

Question

검색 폼에 빈 검색 검색을 방지해야합니다. 형태의 버튼을 제출이없는, 그래서 입력 방지해야

HTML 코드 :

형태 1

<form method="get" class="search-form" id="searchform" action="http://example.com" > 
       <input class="text" name="s" id="s" type="text" />  
    </form> 

형태 2

<form action="http://example.com" class="search-form" method="get">    
    <input type="text" name="s" class="text">       
</form> 

자바 스크립트 코드

// Im sure this funcions returns the 2 different forms, 
var searchForms = getElementsByClass('search-form');  
    for(i in searchForms) 
    { 
     if (searchForms[i].addEventListener) 
     { 
      searchForms[i].addEventListener("submit", function(e) 
       { 
       preventSubmit(e); // no problem here 
       console.log(i) // ALWAYS LOGS 1   
       }); 
     } //I also implemented the ie code, but not necessary here, is the same as above for addEventListener 

    } 

모든 양식을 제출할 때마다 콘솔에 1을 쓰고, 아이디어가 있습니까? 당신은 폐쇄 필요한 모든

Answer 1

에 감사 : 루프 후 (for i in searchForms) i는 마지막 값 (=== 1를)되기 때문에

var searchForms = getElementsByClass('search-form');  
    for(i in searchForms) 
    { 
     if (searchForms[i].addEventListener) 
     { 
      (function(i) { // Closure start <-- We make our own static variable i 
       searchForms[i].addEventListener("submit", function(e) 
        { 
        preventSubmit(e); // no problem here 
        console.log(i)   
        }); 
      })(i); // Closure end. 
     } 
    } 

이 있습니다. 고정 값이 i이되도록 클로저를 만들어야합니다.

여기 폐쇄에 대한 자세한 내용보기 :이 때문에 폐쇄 PLS의 일이 일어나고

How do JavaScript closures work?

Answer 2

유사한 링크를 참조 콜백이 실행되지 않습니다

Jquery dynamic buttons dialog for in loop doesn't populate function

Answer 3

까지 제출 -하는 시간을 기준으로 i의 값은 1입니다. immediately-executing function의 형식으로 종료 값을 변경하면 i의 다양한 값을 캡처하고 사본을 전달할 수 있습니다 그것을 우리의 기능에 반영합니다.

또한 특정 상황을 제외하고

1) 일반적으로 배열을 통해 for-in 루프를 방지. 기존의 for 루프를 사용하십시오. 예를 들어 ECMA5 querySelectorAll() 방법을 통해 양식을 선택한 현재 for-in을 사용하려는 경우 예기치 않은 결과가 발생합니다 (두 번이 아닌 루프 반복 4 회)

2) 불필요하게 어떤 이벤트를 재평가하고 있습니까? 루프의 반복마다 사용할 등록 메커니즘 외부에서 한 번 결정하십시오. 거기서

//get forms 
var searchForms = getElementsByClass('.search-form'); 

//initialise event registration depending on browser 
var addEvent = window.addEventListener ? function(el, evt, func, bubble) { 
    el.addEventListener(evt, func, bubble); 
} : function(el, evt, func) { 
    el.attachEvent('on'+evt, func); 
}; 

//bind submit events 
for (var i=0, len=searchForms.length; i<len; i++) { 
    (function(i) { 
     addEvent(searchForms[i], "submit", function(evt) { alert(i); preventSubmit(evt); }, false); 
    })(i); 
}