js 객체에서 'onclickable'이미지 만들기

Question

아래의 js 객체는 인스턴스 생성 후 지정된 이미지를 생성합니다. 브라우저에서 이미지를 클릭하여 sayQuote을 실행하면됩니다. 제안?

function CharType() 
{ 
    this.charImage = function(whichImage) 
     { 
     var image = document.createElement("img"); 
     image.src = "characters/"+whichImage; 
     document.body.appendChild(image); 
     } 
    function sayQuote() 
     { 
     alert(getQuote()); 
     } 
// this.onclick = sayQuote(); // nope, that doesn't do it! 
} 

인스턴스화 :

var stickfigure = new CharType(); 
stickfigure.charImage("stickfigure.png"); 

Answer 1

이 시도.

function CharType() 
{ 
    function sayQuote() 
    { 
      alert(getQuote()); 
    } 

    this.charImage = function(whichImage) 
    { 
     var image = document.createElement("img"); 
     image.src = "characters/"+whichImage; 
     image.onclick = sayQuote; 
     document.body.appendChild(image); 
    } 
} 

기본적으로 this.charImage에서 생성 된 이미지는 OnClick 속성이 아니라 사용자가 만든 그것을 둘러싼 새로운 객체를 사용하여 이미지의 개체입니다.

Answer 2

function CharType() 
{ 
    function sayQuote() 
    { 
     alert(getQuote()); 
    } 

    this.charImage = function(whichImage) 
    { 
     var image = document.createElement("img"); 
     image.src = "characters/"+whichImage; 

     image.addEventListener("click", this.sayQuote, false); 

     document.body.appendChild(image); 
    } 
}