Bagaimanakah Kata Kunci \'ini\' Berkelakuan Dalam `addEventListener` JavaScript dan Bagaimana Kami Boleh Memastikan Konteks yang Betul?

Nilai ini Dalam Pengendali Menggunakan addEventListener

Dalam JavaScript, ini merujuk kepada objek yang kaedah digunakan. Walau bagaimanapun, apabila mengendalikan acara menggunakan addEventListener, ini boleh merujuk kepada elemen yang menimbulkan acara dan bukannya objek yang mengandungi fungsi pengendali acara.

Pertimbangkan contoh berikut:

<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>

Dalam fungsi handleCellClick, ini merujuk kepada sel yang diklik, bukan objek Jadual tiket. Isu ini boleh diselesaikan menggunakan kaedah bind.

bind membolehkan anda menentukan nilai ini untuk sesuatu fungsi. Dalam kes ini, anda boleh mengikat nilai ini pada objek Jadual tiket:

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

Fungsi terikat akan mempunyai konteks ini yang betul apabila acara dinaikkan:

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

Sebagai alternatif, anda boleh menggunakan kaedah handleEvent, yang direka khusus untuk mengendalikan acara. Dalam kes ini, ini akan sentiasa merujuk kepada objek yang melaksanakan kaedah:

<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>

Kedua-dua bind dan handleEvent menyediakan penyelesaian kepada masalah rujukan ini dalam pengendali acara, membolehkan anda mengakses konteks objek yang betul dalam anda fungsi pengendali acara.

Atas ialah kandungan terperinci Bagaimanakah Kata Kunci \'ini\' Berkelakuan Dalam `addEventListener` JavaScript dan Bagaimana Kami Boleh Memastikan Konteks yang Betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!