「addEventListener」を使用してイベント ハンドラー内で「this」の値を制御するにはどうすればよいですか?

addEventListener を使用したハンドラー内の "this" の値

イベントを処理するために addEventListener メソッドを使用する場合、ハンドラー関数内の "this" の値は次のようになります。混乱の元。デフォルトでは、「this」はイベントを発生させた要素を指します。ただし、この動作を変更して、「this」が目的のオブジェクトを確実に参照するようにする手法があります。

ticketTable オブジェクトを使用した特定の例では、handleCellClick 関数内で問題が発生します。イベント ハンドラーとして呼び出された場合、「this」は、ticketTable オブジェクトではなく、クリック イベントを受け取った要素を指します。

この問題を解決するには、値を指定できるバインド メソッドを利用できます。特定の機能の「this」。 「this」を ticketTable オブジェクトにバインドすることにより、「this」が handleCellClick 関数内の正しいオブジェクトを参照していることを確認できます。これを示すコードの更新バージョンは次のとおりです。

<code class="js">ticketTable.prototype.render = function(element) {
  // ...

  // Bind "this" to ticketTable object for handleCellClick function
  cell1.addEventListener("click", this.handleCellClick.bind(this), false);

  // ...
}

ticketTable.prototype.handleCellClick = function() {
  // Now, "this" references the ticketTable object within the handler
  alert(this.tickets.length);
}</code>

「this」を ticketTable オブジェクトにバインドすると、意図したとおり、handleCellClick 関数内でそのプロパティとメソッドにアクセスできます。

または、handleEvent 関数を使用してイベントをキャッチし、「this」の値を明示的に定義することもできます。

<code class="js">ticketTable.prototype.handleEvent = function(event) {
  switch (event.type) {
    case "click":
      // "this" references the ticketTable object
      alert(this.tickets.length);
      break;
    // ...
  }
}</code>

この場合、イベントを処理するときに、「this」は常に ticketTable オブジェクトを参照します。イベントを発生させた要素に関係なく。

以上が「addEventListener」を使用してイベント ハンドラー内で「this」の値を制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。