JavaScript 이벤트 핸들러의 화살표 함수 내에서 `this` 대신 `event.currentTarget`을 사용하는 이유는 무엇입니까?

.this in Arrow Functions: 이벤트 핸들러 고려 사항

JavaScript로 작업할 때 개발자는 이벤트 핸들러 내에서 화살표 기능을 사용할 때 문제에 직면할 수 있습니다. 기본적으로 이벤트 콜백에 화살표 함수가 사용되는 경우 이벤트 핸들러가 바인딩된 요소를 나타내기 위해 이를 얻는 것은 문제가 됩니다. 이는 화살표 함수에서 this의 값이 사용 시점이 아닌 정의 중에 결정되기 때문에 발생합니다.

이 문제를 해결하려면 화살표 함수 사용 시 this 대신 event.currentTarget을 사용하는 것이 좋습니다. 콜백 내에서. event.currentTarget은 현재 실행 중인 이벤트 리스너와 연관된 DOM 요소를 일관되게 지정하여 원하는 요소가 정확하게 참조될 수 있도록 보장합니다.

.currentTarget 이해

event.currentTarget의 사용법은 이벤트 캡처 및 버블링 개념에서 비롯됩니다. JavaScript에서 이벤트 처리를 효과적으로 탐색하려면 이러한 메커니즘을 이해하는 것이 중요합니다.

• event.currentTarget은 이벤트 대상으로 알려진 이벤트 리스너가 정의된 요소를 나타냅니다.
• event.target은 처음에 이벤트를 트리거한 요소를 나타냅니다.

이벤트 버블링 및 캡처

동안 이벤트 전파, 브라우저 동작은 이벤트 캡처 및 버블링 사용에 의해 영향을 받을 수 있습니다. 둘 다 DOM 트리 내의 이벤트 흐름을 포함하지만 방향은 다릅니다.

• 이벤트 버블링: 이벤트는 대상 요소에서 문서 루트까지 DOM 트리를 따라 위로 이동합니다.
• 이벤트 캡처: 이벤트는 문서의 루트에서 대상 요소로 DOM 트리 아래로 이동합니다.

이벤트 처리의 맥락에서 currentTarget 및 대상이 분명해집니다. 이벤트가 상위 요소에 위임되고 하위 요소에서 이벤트를 트리거하면 currentTarget은 상위 요소로 유지되고 target은 하위 요소를 참조합니다. 이러한 구별은 이벤트 리스너가 연결된 후 동적으로 생성되거나 DOM에 삽입된 요소를 처리할 때 특히 중요합니다.

예: .currentTarget과 .target

아래 스니펫을 고려하세요.

<code class="javascript">var parent = document.getElementById('parent');
parent.addEventListener('click', function(e) {
  document.getElementById('msg').innerHTML = "this: " + this.id + "<br>" +
    "currentTarget: " + e.currentTarget.id + "<br>" +
    "target: " + e.target.id;
});

$('#parent').on('click', function(e) {
  $('#jQmsg').html("*jQuery<br>" + "this: " + $(this).prop('id')
                   + "<br>currenTarget: " + $(e.currentTarget).prop('id')
                   + "<br>target: " + $(e.target).prop('id'));
});

$('#parent').on('click', e => $('#arrmsg').html('*Arrow function <br> currentTarget: ' + e.currentTarget.id));</code>

이 스니펫이 실행될 때 하위 또는 손자 요소를 클릭하면 이벤트 버블링이 트리거됩니다. 결과 동작은 다음 표에 나와 있습니다.

Event Listener	this	currentTarget	target
function	child	parent	child/grand-child
jQuery	parent	parent	child/grand-child
Arrow function	undefined	parent	child/grand-child

표에서 알 수 있듯이 화살표 함수를 사용하면 정의되지 않은 값이 반환되므로 대신 event.currentTarget을 사용해야 한다는 점을 강조합니다. event.currentTarget을 사용하면 화살표 함수 내에서 항상 올바른 요소를 참조할 수 있으므로 JavaScript에서 효과적인 이벤트 처리가 보장됩니다.

위 내용은 JavaScript 이벤트 핸들러의 화살표 함수 내에서 `this` 대신 `event.currentTarget`을 사용하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!