title: Manage clicks events inside Javascript Class?
body: <p>I am always working with old vanilla javascript (es5) with some functionnalities of ES6, now I am working on something, so I created a class to display my html content, in a web page, then add a click</p>
  <p>My class is :</p>
  <pre><code>class Field {
      constructor(key, label, status, isUnsubscribed){
          this.key = key;
          this.label = label;
          this.status = status;
          this.isUnsubscribed = isUnsubscribed;
      }
  
      // want this to be executed on click
      test(){
          alert(this.key);
      }
  
      returnHTMLField(){
  
          // Global Container
          let fieldContainer = document.createElement(&quot;div&quot;);
          
          fieldContainer.addEventListener(&quot;click&quot;, function(){
              // issue here, this return the element itself, which makes sense
              this.test()
          })
  
          return fieldContainer;
      }
  }
  </code></pre>
  <p>So basically I am creating an object with a method adding the component to the DOM, this is working fine with the help of another class, but now whenever I click I want the test function to be executed, but <em><strong>this</strong></em> inside the eventListener action isn't returning the <em>Object state</em>, it is returning the component ( DOM element ), which is a normal behavior, I don't know how can I execute the test function inside the event listener..</p>
  <p>Any help would be much appreciated</p>