이벤트 핸들러를 동적으로 추가하기

내 프로젝트에 이벤트를 동적으로 추가하려고합니다. 여러 이벤트를 추가 할 위치입니다. 이 프로젝트의 기능을 설명하기가 어렵 기 때문에 작성하려고하는 기능을 보여주기 위해 아주 간단한 예제 코드를 만들었습니다. for 루프를 사용하여 여러 이벤트 리스너를 만들려고하는데 그 이벤트 수신기의 본문은 for 루프 반복자 변수를 사용하여 실행됩니다. 그러나 문제는 for 루프의 마지막 값만 모든 이벤트 리스너에서 사용된다는 것입니다. 아래 코드를 참조하십시오. 코드가 실행하고 시도하면이벤트 핸들러를 동적으로 추가하기

<script> 
    function addlisteners() { 
     var allinputs = document.body.getElementsByTagName("input"); 

     for (var i = 0; i < allinputs.length; i++) { 
      allinputs[i].onclick = function() { 
      alert("hii, I am" + i + "input field"); 
      } 
     } 
    } 
    window.onload = function() { 
    for (var i = 0; i < 10; i++) { 
     var input = document.createElement("input"); 
     document.body.appendChild(input); 
    } 
    addlisteners(); 
} 
</script> 
</head> 

<body> 
</body>

그래서, 당신은 모든 입력 상자를 클릭하면이 "HII, 나는 10 입력 필드입니다"처럼, 난의 마지막 값을 표시 것을 볼 수 있습니다. 적절한 값 i를 표시하는 방식으로이 이벤트 처리기를 만드는 방법을 알고 있으면 대답하십시오. 즉; 입력 상자 1의 경우 "hii, 나는 1 입력 필드"이고 입력 상자 2의 경우 "hii, 2 입력 필드"입니다. 시간 내 주셔서 대단히 감사합니다.

출처

2013-09-26 Sameeksha Kumari

이 포함될 수 있습니다. http://stackoverflow.com/questions/16825698/dynamically-adding-event-handler-in-javascript?rq=1 – zura

http://stackoverflow.com/questions/3572480/please-explain- javascript-closures-in-loops 사용, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures – Andreas

는 Here에서 참조,

allinputs[i].onclick = (function(x) { 
     //alert("hii, I am" + j + "input field"); 
     return function(){ 
      alert("hii, I am" + x + "input field"); 
     } 
    })(i);

FIDDLE에 코드를 변경

출처

2013-09-26 07:39:59

이벤트 핸들러를 동적으로 추가하기

답변

관련 문제