使用 addEventListener 的處理程序中 this 的值
在 JavaScript 中，this 指的是呼叫該方法的物件。但是，當使用 addEventListener 處理事件時， this 可以引用引發事件的元素，而不是包含事件處理函數的物件。
考慮以下範例：
<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方法，該方法是專門為處理事件而設計的。在這種情況下，this 將始終引用實作該方法的物件：
<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」中的「this」關鍵字如何表現以及我們如何確保正確的上下文？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
