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

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

Susan Sarandon

リリース： 2024-10-29 10:31:30

オリジナル

856 人が閲覧しました

How Does the

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 サイトの他の関連記事を参照してください。