特有スコープ機能

Question

を添加異なるHTMLに切り替えるので

class A{ 

     setUp(){ 
      //addEventListener 
      $("#id")[0].addEventListener("click",this.rollDiePressed); 
     } 

     rollDiePressed(){ 
      console.log(this) 
     } 

     addHtml(){ 
      var actionTemplate =   
       '<div onclick="ctrl.rollDiePressed()">' + 
       'ROLL' + 
       '</div>' 

       //add the html 
       $("#htmlarea").html(resultHtml); 
     } 

    } 

がHTMLをクリックするようにイベントリスナーを追加する場合は、「この」rollDiePressed内部素子自体にrefferingされることを意味します。これを行う必要のあるクラスを参照したい場合は

$("#id")[0].addEventListener("click",this.rollDiePressed.bind(this)); 

これまでのところすべてが良いです。しかし、addHtml()のようなhtmlを追加すると、rollDiePressed（）を呼び出すことは、（setUpのメソッドで起こりますが）クラス自体を参照しているので、要素自体を参照していません！

---

どうしてですか？私はデフォルトでイベントが常に要素を参照すると思った。 htmlのリファレンスとして「this」を追加すると、なぜこれが起こるのかを理解することに非常に興味があります。

Answer 1

<element onclick="myfunc();">を実行すると、実際の（暗黙的な）イベントハンドラ本体の一部として呼び出されているだけなので、その機能はそれ自体では事象ハンドラではなく、すなわち要素に取り付けられていない。 thisキーワードは、関数の所有者を指していますが、この場合は依然としてクラスです。 element.onclick = myfunc（注：ここでは関数が呼び出されずにバインドされています）を実行した場合、トリガー要素はthisとなります。