이벤트 처리 내의 화살표 함수에서 `this`가 예상대로 작동하지 않는 이유는 무엇입니까?

Javascript의 이벤트 처리를 통한 화살표 함수 동작 이해

이벤트 처리에서 화살표 함수를 콜백으로 활용할 때 다음 사항을 고려하는 것이 중요합니다. 이것과 event.currentTarget의 차이점. 화살표 함수에서 이는 함수가 사용되는 위치가 아니라 함수가 정의된 컨텍스트를 나타냅니다. 따라서 핸들러가 바인딩된 요소에 접근하려면 이 대신 event.currentTarget을 사용해야 합니다.

event.currentTarget과 event.target의 차이점

이벤트 버블링 및 캡처에서는 event.currentTarget과 event.target의 차이점을 이해하는 것이 중요합니다. event.currentTarget은 이벤트 리스너가 연결된 요소를 나타내고, event.target은 처음에 이벤트를 트리거한 요소를 나타냅니다.

문서에 따르면: "EventTarget 유형의 currentTarget, 읽기 전용. EventTarget을 나타내는 데 사용됩니다. EventListener가 현재 처리되고 있습니다. 이는 캡처 및 버블링 중에 특히 유용합니다."

예: 버블링 및 캡처를 통한 이벤트 전파

주어진 코드 조각에서 , 이벤트 처리에서 this와 event.currentTarget 사용 간의 차이점이 설명되어 있습니다.

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

이벤트가 발생하면 DOM을 통해 전파되어 대상 요소에서 시작하여 트리에서 루트까지 이동합니다. 이 과정에서 event.target은 각 수준에서 이벤트를 트리거한 요소를 나타내고, event.currentTarget은 이벤트 리스너가 연결된 요소를 나타냅니다.

Summary

화살표 기능을 사용하여 적절한 이벤트 처리를 보장하려면 이 기능과 event.currentTarget의 차이점을 이해하는 것이 중요합니다. event.currentTarget을 사용하면 화살표 함수가 정의된 컨텍스트에 관계없이 이벤트 리스너와 연결된 요소에 액세스할 수 있습니다.

위 내용은 이벤트 처리 내의 화살표 함수에서 `this`가 예상대로 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!