e.currentTarget

LEE JI YOUNG·2022년 5월 4일
0

JS/Node

목록 보기
23/23

event.currentTarget.value 을 쓰는 이유

위에 글 보시면 잘 설명이 되어있는 것 같습니다.

target을 쓰는 경우에는 이벤트 버블링의 최하위를 반환하는 형식이다보니 Onclick을 씌운 전체 태그가 아닌 다른 것이 잡힐 가능성이 있어서 귀찮은 일이 생길수도 있을 것 같군요.

긍데 2가지 중 뭘써도 코드만 명확히 작성한다면 기능은 동일하다고 생각해용


  • event.target vs event.currentTarget 차이점 :
    event.target은 이벤트버블링의 가장 마지막에 위치한 최하위의 요소를 반환합니다. 즉 클릭된 요소를 기준으로 사용하는 경우 event.target을 사용합니다. 하지만 event.currentTarget의 경우 이벤트가 바인딩된 요소, 해당하는 요소를 반환합니다.
// html
<div onclick="checkTarget();">
  <span>test</span>
</div>

//js
function checkTarget(event) {
  var ele = event.currentTarget;
  console.log(ele);
}
  • event.target // 클릭된 span 태그를 반환
  • event.currentTarget // 이벤트가 바인딩된 div 요소를 반환
profile
프론트엔드 개발자

0개의 댓글