eventlistener를 고유하게 만드시겠습니까?

Question

그래서 eventlisteners 설정이 모두 동일한 변수로 작동하는 문제가 있습니다. 이는 같은 모습입니다 : 나는 이벤트 리스너를 설정 마지막 두 줄에서

// Prepare tooltips 
for (var i = 0; i < document.getElementsByClassName("tooltip").length; i++) { 

    var tooltip = document.getElementsByClassName("tooltip")[i]; 
    var input = document.getElementsByName(tooltip.id.substr(8))[0]; 

    var offsetTop = 0; 
    var tmp = input; 

    while (tmp != null) { 
     offsetTop += tmp.offsetTop; 
     tmp = tmp.offsetParent; 
    } 

    offsetTop -= 130; 

    var offsetLeft = (input.offsetParent.offsetLeft + input.scrollWidth) + 50; 

    tooltip.innerHTML += "<div class='corner'></div>"; 
    tooltip.style.top = offsetTop + "px"; 
    tooltip.style.left = offsetLeft + "px"; 

    input.addEventListener("focus", function() { document.getElementById(tooltip.id).style.display = "block"; }); 
    input.addEventListener("blur", function() { document.getElementById(tooltip.id).style.display = "none"; }); 
} 

. 그래서 언제든지 입력란에 초점을 맞출 때마다 어느 tooltip.id가 항상 같은지 상관하지 않습니다. input.id를 모든 루프마다 다르게 확인했습니다.

Answer 1

자바 스크립트는 재미있는 언어입니다. :)
각 루프에서 변수 팁에 대한 참조를 사용하는 함수를 선언하고 있습니다. 변수를 여러 번 사용했기 때문에 값은 변경되지만 참조는 동일하게 유지됩니다. 함수가 실행되면 참조 (마지막 값을 가짐)를 사용합니다. 여기

솔루션이다. (I 메서드 호출 추천 'document.getElementsByClassName ("툴팁")'한 번만는 DOM의 트래버스가 발생하기 때문에

==== 코드는

VAR 시작 여기에 toolips = document.getElementsByClassName ("툴팁")에 대한 (나는 < toolips.length; VAR I = 0 난 ++) { VAR 툴팁 toolips = [I]는, 입력 VAR = document.getElementsByName (tooltip.id. substr (8)) [0]

var offsetTop = 0; 
var tmp = input; 

while (tmp != null) 
{ 
    offsetTop += tmp.offsetTop; 
    tmp = tmp.offsetParent; 
} 

offsetTop -= 130; 

var offsetLeft = (input.offsetParent.offsetLeft + input.scrollWidth) + 50; 

tooltip.innerHTML += "<div class='corner'></div>"; 
tooltip.style.top = offsetTop + "px"; 
tooltip.style.left = offsetLeft + "px"; 


// assign tooltip id to the input 
input.tooltipId = tooltip.id; 

// add event listeners 
input.addEventListener("focus", function() { document.getElementById(this.tooltipId).style.display = "block"; }); 
input.addEventListener("blur", function() { document.getElementById(this.tooltipId).style.display = "none"; }); 

}

==== CODE는 HERE