image.onload() 함수에 이미지를 추가 할 요소를 전달하는 방법

Question

나는 래퍼 요소 안에 여러 요소를 만들고이 모든 함수를 JavaScript 개체에 저장하는 라이브러리를 작성하고 있습니다. 페이지에이 개체의 인스턴스가 여러 개있을 수 있으므로 ID를 피하려고합니다. 사용자가 일부 요소를 변경할 수 있도록하는 기능이 있으며 이미지 추가 방법을 찾는 데 도움이 필요합니다.

foo.prototype.rebrand = function(line1, line2, imgUrl){ 
    this.branding.childNodes[1].innerHTML = line1; 
    this.branding.childNodes[2].innerHTML = line2; 
    var brandImage = document.createElement('img'); 
    brandImage.onload = function(){ 
     this.branding.childNodes[0].appendChild(brandImage); 
        //this won't work 
    } 
    brandImage.src = imgUrl; 
} 

당신은 foo.rebrand('hello', 'world', 'example.png')

는 불행하게도, .onload 함수 내에서, this 이미지 요소 자체를 참조한다 부를 것이다 : 여기

는 기능입니다. 그렇다면 this.branding.childNodes[0]을 이미지 onload에 어떻게 전달할 수 있습니까?

나는 기능과 같이 작성하는 경우 :

  brandImage.onload = function(anything){ 
     this.branding.childNodes[0].appendChild(brandImage); 
        //this won't work 
    } 

다음 anything 그냥 onload 이벤트에 참조가 될 것입니다.

편집 jsFiddle를 추가합니다 : http://jsfiddle.net/KtJd6/

Answer 1

당신은 당신이 요소하지 childNodes에를 검색하는 특정 요소를 참조하는 방법을 변경해야합니다. 이렇게하면 훨씬 더 강력 해집니다. 그리고 그렇게하면 onload 처리기에 참조 번호 this이 필요하지 않습니다.

foo.prototype.rebrand = function(line1, line2, imgUrl){ 
    var brandImage = document.createElement('img'); 

    // find child divs 
    var divs = this.branding.getElementsByTagName("div"); 
    divs[0].innerHTML = line1; 
    divs[1].innerHTML = line2; 

    brandImage.onload = function(){ 
     divs[0].appendChild(brandImage); 
    }; 
    brandImage.src = imgUrl; 
}; 

참고, 내가 getElementsByTagName() 및 NOT이 childNode 인덱스를 직접 참조하여 요소를 얻고있다. 이렇게하면 텍스트 노드가있는 위치를 구분하지 않고 대상을 지정하고 수정할 요소를 훨씬 더 강력하게 참조 할 수 있습니다.