「this」キーワードは JavaScript の「addEventListener」でどのように動作しますか?また、適切なコンテキストを確保するにはどうすればよいですか?

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

JavaScript では、これはメソッドが呼び出されるオブジェクトを指します。ただし、addEventListener を使用してイベントを処理する場合、イベント ハンドラー関数を含むオブジェクトではなく、イベントを発生させた要素を参照できます。

次の例を考えてみましょう。

<code class="javascript">function ticketTable(tickets) {
  this.tickets = tickets;
}

ticketTable.prototype.render = function (element) {
  var tbl = document.createElement("table");
  for (var i = 0; i < this.tickets.length; i++) {
    var row = document.createElement("tr");
    var cell1 = document.createElement("td");
    var cell2 = document.createElement("td");
    cell1.appendChild(document.createTextNode(i));
    cell2.appendChild(document.createTextNode(this.tickets[i]));
    cell1.addEventListener("click", this.handleCellClick, false);
    row.appendChild(cell1);
    row.appendChild(cell2);
    tbl.appendChild(row);
  }
  element.appendChild(tbl);
};

ticketTable.prototype.handleCellClick = function () {
  // PROBLEM! In the context of this function, "this" is the element that triggered the event.
  alert(this.innerHTML); // Works fine
  alert(this.tickets.length); // Does not work
};</code>

handleCellClick 関数。これは、ticketTable オブジェクトではなく、クリックされたセルを参照します。この問題は、bind メソッドを使用して解決できます。

bind を使用すると、関数の this の値を指定できます。この場合、this 値を ticketTable オブジェクトにバインドできます:

<code class="javascript">cell1.addEventListener("click", this.handleCellClick.bind(this), false);</code>

バインドされた関数は、イベントが発生したときに正しい this コンテキストを持ちます:

<code class="javascript">ticketTable.prototype.handleCellClick = function () {
  alert(this.innerHTML); // Still works fine
  alert(this.tickets.length); // Now works as expected
};</code>

または、イベントを処理するために特別に設計された handleEvent メソッドを使用できます。この場合、これは常に次のメソッドを実装するオブジェクトを参照します。

<code class="javascript">ticketTable.prototype.handleEvent = function (event) {
  console.log(this.name); // 'Something Good'
  switch (event.type) {
    case 'click':
      // Some code here...
      break;
    case 'dblclick':
      // Some code here...
      break;
  }
};</code>

bind と handleEvent の両方が、イベント ハンドラーでのこの参照の問題に対する解決策を提供し、オブジェクト内の正しいオブジェクト コンテキストにアクセスできるようにします。イベントハンドラー関数。

以上が「this」キーワードは JavaScript の「addEventListener」でどのように動作しますか?また、適切なコンテキストを確保するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。