이벤트 처리에서 화살표 함수를 콜백으로 활용할 때 다음 사항을 고려하는 것이 중요합니다. 이것과 event.currentTarget의 차이점. 화살표 함수에서 이는 함수가 사용되는 위치가 아니라 함수가 정의된 컨텍스트를 나타냅니다. 따라서 핸들러가 바인딩된 요소에 접근하려면 이 대신 event.currentTarget을 사용해야 합니다.
이벤트 버블링 및 캡처에서는 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은 이벤트 리스너가 연결된 요소를 나타냅니다.
화살표 기능을 사용하여 적절한 이벤트 처리를 보장하려면 이 기능과 event.currentTarget의 차이점을 이해하는 것이 중요합니다. event.currentTarget을 사용하면 화살표 함수가 정의된 컨텍스트에 관계없이 이벤트 리스너와 연결된 요소에 액세스할 수 있습니다.
위 내용은 이벤트 처리 내의 화살표 함수에서 `this`가 예상대로 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!