JavaScript에서 이벤트 핸들러로 사용되는 화살표 함수에서 `this`는 어떻게 작동합니까?

Javascript - 이벤트 핸들러에서 화살표 함수

ES6에는 간결하고 깔끔한 코드를 제공하는 새로운 개념의 화살표 함수가 있습니다. 함수를 정의하는 방법. 그러나 이벤트 핸들러에서 화살표 함수를 콜백으로 사용하는 경우 이에 대한 동작을 이해하는 것이 중요합니다.

문제

제공된 코드에서 이벤트. currentTarget 속성은 사용되지 않으며, 요소를 클릭하면 화살표 함수는 unundefined를 반환합니다.

화살표 함수의 this

일반 함수와 달리 this의 값은 내부에 있습니다. 화살표 함수는 화살표 함수가 사용되는 위치가 아니라 정의된 위치에 따라 결정됩니다. 제공된 예에서 화살표 함수는 더 큰 함수의 컨텍스트에서 정의되어 예상치 못한 동작이 발생할 수 있습니다.

해결책

이 문제를 해결하려면 문제가 발생하면 이에 액세스하는 대신 event.currentTarget을 사용하여 핸들러가 바인딩된 요소를 가져와야 합니다. event.currentTarget은 항상 EventListener가 현재 처리되고 있는 DOM 요소를 참조합니다. 코드를 수정하는 방법은 다음과 같습니다.

<code class="javascript">dom.videoLinks.click((e) => {
  e.preventDefault();
  console.log(e.currentTarget);
  var self = e.currentTarget,
    url = self.attr(configuration.attribute);

  eventHandlers.showVideo(url);

  // Deactivate any active video thumbs
  dom.videoLinks.filter('.video-selected').removeClass('video-selected');

  // Activate selected video thumb
  self.addClass('video-selected');
});</code>

.currentTarget 대 .target

주의해야 할 또 다른 중요한 차이점은 event.currentTarget 및 event의 동작입니다. .target 이벤트 버블링 및 캡처의 맥락에서.

• currentTarget: 이벤트 리스너가 연결된 요소를 나타냅니다.
• target : 이벤트를 트리거한 요소를 나타냅니다.

중첩 요소 및 이벤트 전파를 처리할 때 event.currentTarget을 사용하면 항상 올바른 요소가 참조됩니다.

< ;h3>예

제공된 스니펫은 event.currentTarget과 event.target 간의 차이점을 보여줍니다. 다양한 요소를 클릭하면 트리거된 요소와 이벤트 리스너의 컨텍스트에 따라 각 속성의 값이 어떻게 변경되는지 출력이 표시됩니다.

위 내용은 JavaScript에서 이벤트 핸들러로 사용되는 화살표 함수에서 `this`는 어떻게 작동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!