JavaScript로 요소를 만들 때 onclick 이벤트를 추가하는 방법은 무엇입니까?

Question

목록에 요소를 추가하는 스크립트가 있습니다. 요소를 클릭하면 함수가 호출되고이 함수의 경우 li을 만들 때 변수의 값이 필요합니다 (li 내용).

newLi.onclick = function(){...}과 같은 해결책을 확인했습니다.

이 솔루션의 문제점은 함수에서 올바른 값을 얻지 못하고 목록의 다른 요소 값을 얻게된다는 것입니다.

var ULlist = document.getElementById('ULid'); 
for(i=0;i<data.length;i++){ 
    var Value = data[i] //function to get data 
    var newLi = document.createElement('li'); 
    newLi.appendChild(elements.createTextNode(Value)); 
    newLi.onclick = function(){alert(Value)} //not displaying the right value 
    ULlist.appendChild(newLi); 
} 

그래서 질문은, 요소에 변수의 오른쪽 값을주고 테 onclick 이벤트를 만들 수있는 방법이된다

는 지금이 내가 요소를 만드는거야 어떻게?

편집 : 더 많은 코드를 추가했습니다. 리의가 생성, 정보가 제대로 표시되고있는, 유일한 문제는 올바른 가치를 포기하지 않을거야하는 이벤트를 만들려고 할 때, 즉, 특히 element.addEventListener API li

Answer 1

내부에서 함수를 만들고 해당 함수의 범위에서 값을 유지하면이 작업을 수행 할 수 있습니다.

var data = [10, 20, 30, 40, 50, 60, 70]; 
addItems = function() { 
    var list = document.getElementById("list"); 
    for (var i = 0; i < data.length; i++) { 
     var newLi = document.createElement("li"); 
     newLi.innerHTML = i + 1; 
     list.appendChild(newLi); 
     (function(value){ 
     newLi.addEventListener("click", function() { 
      alert(value); 
     }, false);})(data[i]); 
    } 

}​ 

jsfiddle : http://jsfiddle.net/Qf5JZ/1/

Answer 2

사용 DOM2 event listeners에 cointained 값이어야한다입니다 :

function clickHandlerFor(data) { 
    return function(event) { 
     var li = event.target; 
     // do something with data and li. 
    }; 
} 

for (...) { 
    var Data = ... //function to get data 
    var newLi = elements.createElement('li'); 
    newLi.appendChild(elements.createTextNode(Data)); 
    newLi.addEventListener("click", clickHandlerFor(Data), false); 
    ULlist.appendChild(newLi); 
} 

또 다른 옵션은 훨씬 간단합니다 : 당신의 처리기에서 TextNode 값을 사용

나는이 문제가 발생

function handler(event) { 
    var dataValue = event.target.firstChild.nodeValue; // value of TextNode created by elements.createTextNode(Data) 
    // handle dataValue 
} 

newLi.addEventListener("click", handler, false); 

Answer 3

, 난 내가 해결 이 같은 t :

var ULlist = document.getElementById('ULid'); 
for(var i=0; i<data.length; i++){ 
    var index = i; 
    (function() { 
    var Value = data[index] //function to get data 
    var newLi = document.createElement('li'); 
    newLi.appendChild(elements.createTextNode(Value)); 
    newLi.onclick = function() { ... }; 
    ULlist.appendChild(newLi); 
    }()); 
} 

편집 : 오늘, 나는 범위에 대한에 대한 또 다른 일을 기억한다. 루프 내에서 작동하도록 매개 변수 'i'를 전송하는 또 다른 솔루션입니다.

var ULlist = document.getElementById('ULid'); 
for(var i=0; i<data.length; i++){ 
    (function(index) { 
     var Value = data[index] //function to get data 
     var newLi = document.createElement('li'); 
     newLi.appendChild(elements.createTextNode(Value)); 
     newLi.onclick = function() { ... }; 
     ULlist.appendChild(newLi); 
    }(i)); 
} 

이 기능을 사용해보십시오.