title: Can i send an extra object to a javascript event and use the objects properties in the event?
body: <p>I have a simple html that has multiple div elements.</p>
  <pre><code>
  &lt;body onload=&quot;start()&quot;&gt;
      &lt;div id=&quot;image1&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;image2&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  </code></pre>
  <p>onload event of the body triggers a javascript function called start() that creates two objects from a class called img. The class creates a canvas in the div that it points to (the first parameter) with a width and height stated in the second and third parameters.</p>
  <pre><code>
  function start(){
      let img1 = new img(&quot;image1&quot;,640,480);
      let img2 = new img(&quot;image2&quot;,320,240);
  }
  
  </code></pre>
  <p>The following class creates the canvas and an array which it fills with random numbers between 0-255. It also adds a mousemove event to the object.</p>
  <pre><code>
  class img{
      constructor(p_divid, p_w, p_h){ 
          this.divid = p_divid; //DIV id
          this.w = p_w; //width of the div        
          this.h = p_h; //height of the div
          this.pixels = []; //pixel values
          for (let index = 0; index &lt; this.w*this.h; index++) {
              this.pixels[index] = Math.floor(Math.random()*255); //a random value up to 255
          }
          this.div = document.getElementById(this.divid); //div element
          this.div.innerHTML = &quot;&lt;canvas id='canvas-&quot;+this.divid+&quot;' width='&quot;+this.w+&quot;' height='&quot;+this.h+&quot;' style='background-color:red;'&gt;&lt;/canvas&gt;&quot;; //this creates a canvas
          this.canvas = document.getElementById(&quot;canvas-&quot;+this.divid); //canvas element
          this.canvas.addEventListener(&quot;mousemove&quot;, this.mmove); //mouse move event           
      }
  
  </code></pre>
  <p>the mousemove event gets the coordinates of the mouse relative to the element and calculates the position of the element that it wants to reach in the object's pixels. I want to learn the best practice to reach the objects pixels array.</p>
  <pre><code>
      mmove(e){
          var rect = e.target.getBoundingClientRect();
          var x = e.clientX - rect.left; 
          var y = e.clientY - rect.top;  
          var position_in_array = (y * 640) + x;
  //******************************************************************************
          //THIS IS WHERE I WOULD LIKE TO GET THE VALUE OF THE PIXELS ARRAY AND 
          //WRITE IT ON THE CONSOLE. Something like:
          //let x = object.pixels[position_in_array];
  //******************************************************************************
      }
  </code></pre>
  <p>the whole html file that you see above is :</p>
  <pre><code>
      &lt;!DOCTYPE html&gt;
      &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;UTF-8&quot;&gt;
          &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
          &lt;title&gt;test&lt;/title&gt;
      &lt;/head&gt;
          &lt;body onload=&quot;start()&quot;&gt;
              &lt;div id=&quot;image1&quot;&gt;&lt;/div&gt;
              &lt;div id=&quot;image2&quot;&gt;&lt;/div&gt;
          &lt;/body&gt;
      
          &lt;script&gt;
              function start(){
                  let img1 = new img(&quot;image1&quot;,640,480);
                  let img2 = new img(&quot;image2&quot;,320,240);
              }
      
              class img{
                  constructor(p_divid, p_w, p_h){ 
                      this.divid = p_divid; //DIV id
                      this.w = p_w; //width of the div        
                      this.h = p_h; //height of the div
                      this.pixels = []; //pixel values
                      for (let index = 0; index &lt; this.w*this.h; index++) {
                          this.pixels[index] = Math.floor(Math.random()*255); //a random value up to 255
                      }
                      console.log(this.pixels);
                      this.div = document.getElementById(this.divid); //div element
                      this.div.innerHTML = &quot;&lt;canvas id='canvas-&quot;+this.divid+&quot;' width='&quot;+this.w+&quot;' height='&quot;+this.h+&quot;' style='background-color:red;'&gt;&lt;/canvas&gt;&quot;; //this creates a canvas
                      this.canvas = document.getElementById(&quot;canvas-&quot;+this.divid); //canvas element
                      this.canvas.addEventListener(&quot;mousemove&quot;, this.mmove); //mouse move event
                  }
      
                  mmove(e){
                      var rect = e.target.getBoundingClientRect();
                      var x = e.clientX - rect.left; 
                      var y = e.clientY - rect.top;  
                      var position_in_array = (y * 640) + x;
  //******************************************************************************
          //THIS IS WHERE I WOULD LIKE TO GET THE VALUE OF THE PIXELS ARRAY AND 
          //WRITE IT ON THE CONSOLE. Something like:
          //let x = object.pixels[position_in_array];
  //******************************************************************************
                  }
              }
          &lt;/script&gt;
      &lt;/html&gt;
  
  </code></pre>