배열 및 FOR 루프를 통해 이벤트 리스너 추가

Question

최근 며칠 동안 약간의 문제가있었습니다. 나는 가능한 한 내 코드를 간소화하려고 노력하고 있으며 JavaScript를 통해 Event Listeners를 추가하려고하는 단계에 이르렀습니다. 따라서 HTML이 좀더 세련되게 보입니다.

-HTML 세그먼트

<input type="button" id="googleSearchButton" /> 
<input type="button" id="youtubeSearchButton" /> 
<input type="button" id="wikiSearchButton" /> 
<input type="button" id="facebookSearchButton" /> 
<input type="button" id="twitterSearchButton" /> 
<input type="button" id="tumblrSearchButton" /> 
<input type="button" id="dropboxSearchButton" /> 

자바 스크립트 세그먼트

var contIDArray = ["google", "youtube", "wiki", "facebook", "twitter", "tumblr", "dropbox"]; 

window.load = initAll(); 
function initAll(){ 
    applyProperties(); 
} 

function applyProperties(){ 
     for (var i = 0; i < contIDArray.length; i++){ 
      addEventListeners(contIDArray[i] + "SearchButton"); 
     } 
} 

function addEventListeners(id){ 
    document.getElementById(id).addEventListener("click", testAlert(id), false); 
} 

function testAlert(id){ 
    alert(id + " clicked") 
} 

이론

으로, 나는 당신이 볼 수있는 희망 루프 의지 루프에 대한 컨테이너 배열의 값이 다 떨어질 때까지 매번 Array의 위치에 "SearchButton"을 출력합니다. 예를 들어 처음으로 루프가 실행되면 "googleSearchButton", 두 번째로 "youtubeSearchButton"등이 출력됩니다.

이제는 프로젝트의 다른 세그먼트에 Button 값과 텍스트 상자 자리 표시 자 텍스트를 적용하기 위해 FOR 루프를 사용하여 속성을 적용하는 것으로 알고 있습니다.

간단한 테스트 기능 ("testAlert()")을 추가하고 호출 한 요소의 ID를 전달하도록 설정했습니다. 일단 이벤트 리스너가 추가되면 각 버튼을 클릭하기 만하면 id가 알려지며 클릭되었음을 알립니다.

문제점 이제

은, 이론적으로, 나는이 일 거라 생각 했어요. 그러나 FOR 루프는 "addEventListeners"함수를 발생시키고,이 함수는 이벤트 리스너를 추가하여 클릭시 "testAlert"를 발생시키는 것으로 보입니다. 그러나 이벤트 리스너를 추가하자마자 바로 "testAlert"기능을 시작하고 클릭 할 때 실행되지 않습니다.

사과를 많이 드려 죄송 합니다만, 나는 항상 내 설명의 길이를 과장합니다. 다행히도 내 설명보다는 내 코드에서 성취하려는 것을 볼 수 있기를 바랍니다.

도움을 많이 주시면 감사하겠습니다. :)

Answer 1

에서 지원되지 않습니다,하지만 잘못된 몇 가지가있다.

먼저 id.addEventListener을 수행 할 수 없습니다. document.getElementById(id).addEventListener해야합니다. id은 문자열 일 뿐이므로 DOMElement가 필요합니다.

두 번째로 testAlert(id)을 수행하면이 함수가 실행되고 반환 값 (undefined)이 이벤트 리스너로 할당됩니다. 함수를 전달해야합니다. 좋아요 :

id.addEventListener("click", function(){ 
    testAlert(this.id); // this is the DOMElement you clicked on 
}, false); 

모든 버튼에 클래스를 추가하고 그런 이벤트를 추가하는 것이 좋습니다.

<input type="button" id="googleSearchButton" class="searchButton" /> 
<input type="button" id="youtubeSearchButton" class="searchButton" /> 
<input type="button" id="wikiSearchButton" class="searchButton" /> 
<input type="button" id="facebookSearchButton" class="searchButton" /> 
<input type="button" id="twitterSearchButton" class="searchButton" /> 
<input type="button" id="tumblrSearchButton" class="searchButton" /> 
<input type="button" id="dropboxSearchButton" class="searchButton" /> 

: 그리고

var buttons = document.getElementsByClassName('searchButton'); 
for(b in buttons){ 
    if(buttons.hasOwnProperty(b)){ 
    buttons[b].addEventListener("click", function(){ 
     testAlert(this.id); // this is the DOMElement you clicked on 
    }, false); 
    } 
} 

참고 : addEventListener 및 getElementsByClassName (즉 의해 나는 그들이 IE에서 작동하지 않을 수 있습니다 의미) 모든 브라우저에서 사용할 수 없습니다. 이러한 이유로 많은 웹 사이트에서 jQuery과 같은 자바 스크립트 라이브러리를 사용합니다. jQuery는 모든 크로스 브라우저 항목을 처리합니다. 당신이 jQuery를 사용하려는 경우, 당신이 할 수 있습니다 :

$('.searchButton').click(function(){ 
    testAlert(this.id); 
}); 

참고 2 : 자바 스크립트에서 함수는 변수 및 매개 변수로 전달 될 수있다.

document.getElementById(id).addEventListener('click', testAlert, false); 

공지 사항 당신이 반환 값을 전달하는 testAlert()을 수행 할 때 더 ()는 testAlert 후, 우리는 함수 자체를 전달하지 않습니다이 얼마나. 이 방법을 사용하면 testAlert을 약간 수정해야합니다.

function testAlert(){ 
    alert(this.id + " clicked") 
} 

Answer 2

변경 :

function addEventListeners(id){ 
    id.addEventListener("click", testAlert(id), false); 
} 

에 대한이 :

function addEventListeners(id){ 
    document.getElementById(id).addEventListener("click", testAlert(id), false); 
} 

그렇지 않으면 당신은 문자열에 addEventListener을 적용하고 있습니다. 어쨌든 과 같이 addEventListener을 이벤트에 할당하십시오.

Answer 3

id는 나에게 줄처럼 보입니다.그래서 그 대신 같은 것을 수행 로켓으로

http://jsfiddle.net/ZRZY9/2/

obj.addEventListener("click", function() { testAlert(id); }, true); 

당신이 그것을 호출하고에 이벤트를 설정하는 "위에 언급 : 또한

function addEventListeners(id){ 
    var obj = document.getElementById(id); 
    obj.addEventListener("click", testAlert(id), false); 
} 

을, 여기에 작업 코드 반환 값은 정의되지 않음 ".

나쁜 소식

당신은 여기에 가까이있어하여 addEventListener()가 현재 인터넷 익스플로러 7

Answer 4

코드를 실행했습니다. 처음 발견 한 문제는 문서에서 요소를 만들기 전에 요소를 찾으려고한다는 것입니다. 페이지가 완료되기 전에 window.onLoad가 시작됩니다. body 태그의 onload 속성을 사용하여이를 테스트했으며 이렇게 작동합니다.

그래서, 당신은 페이지가 완전히로드이었다 전에 "ID"문자열 함수 발사를 사용하여 요소를 찾기 위해 노력의 상기 문제의 조합입니다.

어쨌든 기쁘게 생각합니다!

이 내가 마지막에했던 자바 스크립트는 다음과 같습니다

<script> 
    var contIDArray = ["google", "youtube", "wiki", "facebook", "twitter", "tumblr", "dropbox"]; 

function initAll(){ 
    applyProperties(); 
} 

function applyProperties(){ 
     for (var i = 0; i < contIDArray.length; i++){ 
    var newString = contIDArray[i] + "SearchButton" 
      addEventListeners(newString); 
     } 
} 

function addEventListeners(id){ 
    document.getElementById(id).addEventListener("click", testAlert, false); 
} 

function testAlert(){ 
    alert(this.id + " clicked") 
} 
</script>