JavaScript - 화살표 함수 및 이벤트 핸들러

화살표 함수를 이벤트 핸들러에 대한 콜백으로 사용할 때 함수 내 this 값은 예상치 못한 것입니다. 이 블로그 게시물에서는 이러한 동작의 이유를 설명하고 event.currentTarget을 사용하여 의도한 요소에 액세스하는 솔루션을 제공합니다.

화살표 함수 및 어휘 범위

일반 함수와 달리 화살표 함수에는 속성이 없습니다. 이에 대한 자신의 맥락이나 범위. 대신, 주변 컨텍스트의 어휘 범위를 상속합니다. 제공된 예에서 화살표 함수는 dom.videoLinks의 클릭 이벤트 핸들러 내에서 정의됩니다. 따라서 화살표 함수 내의 이는 dom.videoLinks 요소를 참조합니다.

이벤트 리스너 및 event.currentTarget

이벤트 리스너는 특정 요소에 연결되며 특정 이벤트가 발생할 때 실행됩니다. 이벤트가 트리거되면 이벤트 객체에는 이벤트를 트리거한 대상 요소와 이벤트 리스너가 연결된 현재 대상 요소에 대한 정보가 포함됩니다.

event.target 속성은 이벤트를 직접 발생시키는 요소를 참조합니다. 이벤트를 촉발시켰습니다. 대부분의 경우 클릭되거나 마우스 오버되거나 포커스를 받은 요소입니다.

반면 event.currentTarget 속성은 이벤트 리스너가 연결된 요소를 나타냅니다. 실행 시 이벤트가 처리되는 요소입니다.

화살표 함수에서 event.currentTarget 사용

화살표 함수 이벤트 핸들러 내에서 의도한 요소에 액세스하려면 이벤트를 사용하세요. .currentTarget 대신 사용하세요. 다음은 코드의 수정된 버전입니다.

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');
});

.currentTarget 대 .target

일반적으로 이벤트 핸들러로 작업할 때 event.currentTarget은 event.target보다 사용해야 합니다. 이는 이벤트가 DOM 트리를 버블링하거나 캡처할 수 있고 event.target을 사용하면 대상으로 삼으려는 요소를 항상 참조하지 않을 수 있기 때문입니다.

event.currentTarget은 이벤트 리스너가 있는 요소를 일관되게 참조합니다. 이벤트 흐름에 관계없이 첨부됩니다.

결론

이벤트 핸들러에서 화살표 기능을 사용할 때 의도한 요소에 액세스하려면 event.currentTarget을 사용하는 것을 기억하세요. 정확한 이벤트 처리를 보장하기 위해 이벤트 버블링 및 캡처 작업을 할 때 event.target과 event.currentTarget의 차이점을 염두에 두세요.