`addEventListener`를 사용하여 이벤트 핸들러 내에서 \'this\' 값을 어떻게 제어할 수 있습니까?

addEventListener를 사용하는 핸들러 내 "this"의 값

addEventListener 메소드를 사용하여 이벤트를 처리할 때 핸들러 함수 내 "this"의 값은 다음과 같습니다. 혼란의 근원. 기본적으로 "this"는 이벤트를 발생시킨 요소를 나타냅니다. 그러나 이 동작을 수정하고 "this"가 원하는 개체를 참조하는지 확인하는 기술이 있습니다.

ticketTable 개체를 사용하는 특정 예에서는 handlerCellClick 함수 내에서 문제가 발생합니다. 이벤트 핸들러로 호출될 때 "this"는 ticketTable 개체가 아닌 클릭 이벤트를 수신한 요소를 가리킵니다.

이 문제를 해결하려면 값을 지정할 수 있는 바인딩 메서드를 활용하면 됩니다. 특정 기능에 대한 "this"입니다. "this"를 ticketTable 개체에 바인딩하면 "this"가 handlerCellClick 함수 내에서 올바른 개체를 참조하는지 확인할 수 있습니다. 다음은 이를 보여주는 업데이트된 버전의 코드입니다.

<code class="js">ticketTable.prototype.render = function(element) {
  // ...

  // Bind "this" to ticketTable object for handleCellClick function
  cell1.addEventListener("click", this.handleCellClick.bind(this), false);

  // ...
}

ticketTable.prototype.handleCellClick = function() {
  // Now, "this" references the ticketTable object within the handler
  alert(this.tickets.length);
}</code>

"this"를 ticketTable 개체에 바인딩하면 의도한 대로 handlerCellClick 함수 내에서 해당 속성과 메서드에 액세스할 수 있습니다.

또는 handlerEvent 함수를 사용하여 이벤트를 포착하고 "this" 값을 명시적으로 정의할 수 있습니다.

<code class="js">ticketTable.prototype.handleEvent = function(event) {
  switch (event.type) {
    case "click":
      // "this" references the ticketTable object
      alert(this.tickets.length);
      break;
    // ...
  }
}</code>

이 경우 "this"는 이벤트를 처리할 때 항상 ticketTable 객체를 참조합니다. 이벤트를 발생시킨 요소와 관계없이

위 내용은 `addEventListener`를 사용하여 이벤트 핸들러 내에서 \'this\' 값을 어떻게 제어할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!