title: How to access a JavaScript object property with addEventListener?
body: <p>I'm displaying images which will dynamically added on click of a html button. Using <code>addEventListener</code> I want to add an on click function to these images which will access another property of the object so it can be displayed.</p>
  
  <p>This is what my code look likes:</p>
  
  <pre><code>    var fruit = function(type, cost)
          {
              this.type = type;
              this.cost = cost;
              this.image = new Image();
              this.image.src = "fruits/" +type +".png";                   
          }
      var fruitArray = new Array();
  
      fruitArray[0] = new fruit("apple", 0.35);
      fruitArray[1] = new fruit("mango", 0.55);
      fruitArray[2] = new fruit("orange", 0.15);
  
      function printFruits()
      {
          var counter = 0;
          var element = document.getElementById("div1");
          for(counter = 0; counter &lt; 3; counter++)
          {
              fruitArray[counter].image.addEventListener("click", function fruitType() {
                  window.alert(this.type);
              });
              element.appendChild(fruitArray[counter].image);
  
          }
      }
  </code></pre>
  
  <p>At the moment I'm displaying <code>'fruitArray[counter].image.type'</code> (which is undefined). </p>
  
  <p>I want to know if there is a way you can derefernce the image property in order to display <code>'fruitArray[counter].type'</code>, any help would be appreciated!</p>