이벤트 핸들러 내 화살표 함수에서 \'this\'가 다르게 동작하는 이유는 무엇입니까?

이벤트 핸들러의 화살표 함수 및 "this" 바인딩

JavaScript의 ES6 화살표 함수를 사용하여 작업할 때 개발자는 다음을 사용하여 예기치 않은 동작이 발생할 수 있습니다. 이벤트 핸들러 내의 "this" 키워드. 전통적인 함수 표현식과 달리 화살표 함수는 호출된 컨텍스트가 아닌 주변 범위에서 this 컨텍스트를 상속합니다.

문제: undefine $(this)

제공된 코드 조각에서 화살표 함수 접근 방식은 이벤트 리스너에 연결된 의도한 요소 대신 "this"를 전역 컨텍스트(창 개체)에 바인딩합니다. 결과적으로 $(this)는 전역 컨텍스트 내에 해당하는 jQuery 객체가 없기 때문에 정의되지 않은 값을 반환합니다.

해결책: event.currentTarget

이 문제를 해결하려면 사용하세요. 올바른 요소 참조를 얻으려면 이벤트 핸들러 내에서 event.currentTarget을 사용하는 것이 좋습니다. "this"와 달리 event.currentTarget은 항상 현재 이벤트 리스너에 의해 처리되고 있는 DOM 요소를 참조합니다.

event.currentTarget 사용 예시

수정된 코드 조각은 다음과 같습니다. event.currentTarget 수정:

<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.

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

이벤트 버블링의 맥락에서 event.currentTarget은 전파 프로세스 전반에 걸쳐 동일하게 유지되는 반면, event.target은 현재 처리 중인 요소에 따라 변경됩니다.

결론

화살표 함수는 JavaScript에서 간결한 구문을 제공하지만 이벤트 핸들러 내에서 "this"를 사용할 때 고유한 범위 지정 동작을 기억하는 것이 중요합니다. event.currentTarget을 활용하면 개발자는 적절한 DOM 요소에 지속적으로 액세스하고 JavaScript 애플리케이션에서 이벤트를 효과적으로 처리할 수 있습니다.

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