title: Peculiar scope switching in different html adding functions
body: <p>When adding an event listener like so</p>
  
  <pre><code>    class A{
  
          setUp(){
              //addEventListener
              $("#id")[0].addEventListener("click",this.rollDiePressed);
          }
  
          rollDiePressed(){
              console.log(this)
          }
  
          addHtml(){
              var actionTemplate =           
                  '&lt;div onclick="ctrl.rollDiePressed()"&gt;' +
                  'ROLL' +
                  '&lt;/div&gt;'
  
                  //add the html
                  $("#htmlarea").html(resultHtml);
          }
  
      }
  </code></pre>
  
  <p>Clicking on the html would mean that "this" inside rollDiePressed is reffering to the element itself. If we wanted it to refer to the class that we would need to do this </p>
  
  <pre><code>$("#id")[0].addEventListener("click",this.rollDiePressed.bind(this));
  </code></pre>
  
  <p>All is good so far. However, when adding html like in <code>addHtml()</code> calling rollDiePressed() is not referencing the element itself as i would expect (and as it happens in the method setUp) but is referencing the class itself!</p>
  
  <hr>
  
  <p>Why does this happen? I thought by default the event would always reference the element. adding "this" as a reference on the html solves it, im just very interested in understanding why this happens.</p>