\'this\' 키워드는 JavaScript\의 `addEventListener`에서 어떻게 작동하며 적절한 컨텍스트를 어떻게 보장할 수 있습니까?

addEventListener를 사용하여 핸들러 내에서 이 값

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>

handlerCellClick 함수에서는 ticketTable 개체가 아닌 클릭된 셀을 참조합니다. 이 문제는 바인드 메소드를 사용하여 해결할 수 있습니다.

바인드를 사용하면 함수에 대해 이 값을 지정할 수 있습니다. 이 경우 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>

또는, 이벤트를 처리하도록 특별히 설계된 handlerEvent 메서드를 사용할 수 있습니다. 이 경우, 이는 항상 메소드를 구현하는 객체를 참조합니다.

<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와 handlerEvent는 모두 이벤트 핸들러에서 이 참조 문제에 대한 솔루션을 제공하므로 사용자가 올바른 객체 컨텍스트에 액세스할 수 있습니다. 이벤트 핸들러 기능.

위 내용은 \'this\' 키워드는 JavaScript\의 `addEventListener`에서 어떻게 작동하며 적절한 컨텍스트를 어떻게 보장할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!