target과 currentTarget을 상황에 맞게 처리하기
![](https://i0.wp.com/choonse.com/wp-content/uploads/2022/01/DSC_7228.jpg?resize=840%2C473&ssl=1)
자바스크립트에서 이벤트를 다룰 때 target과 currentTarget의 프로퍼티를 사용해 요소에 접근이 가능합니다.
그럼 target과 currentTarget의 차이는 무엇일까요?
1. target과 currentTarget
간단하게 설명하면 target은 이벤트가 발생한 바로 그 요소를 직접 가리키고 currentTarget은 이벤트 리스너(EventListener)를 가진 요소를 가리킵니다.
‘백문불여일코드(百聞不如一code)’이므로 코드를 통해 무엇을 의미하는지 확인해 보겠습니다.
<style> .upper{ background:gold; width:80px; text-align:center; } .lower{ background:pink; width:50px; } </style> <script> function clicked(event){ alert(event.target.id+" clicked"); } </script> <div class="upper" onClick="clicked(event)" id="div"> <span class="lower" id="span"> span </span> </div>
위의 코드를 통해 각각이 의미하는 바를 확인해 보겠습니다.
먼저 위 코드를 실행하면 다음 그림과 같은 결과가 나타납니다.
![](https://i0.wp.com/choonse.com/wp-content/uploads/2022/01/asdasd.png?resize=213%2C74&ssl=1)
여기서 노랑은 div, 핑크는 span이며, 핑크가 노란색 위에 앉아있는 것이라고 볼 수 있습니다.
그런데 onClick 이벤트는 div에서 설정했지만 노랑을 눌러도, 핑크를 눌러도 모두 이벤트가 발생합니다.
div에만 이벤트를 설정했는데 왜 자식인 span도 이벤트를 상속 받는 것일까요?
이는 이벤트 버블링과 이벤트 캡쳐와 관련이 있으며, 관련 내용은 아래 포스트에서 확인해 보겠습니다.
이벤트 발생에 따른 target은 다음과 같습니다.
– 핑크 부분을 클릭
target -> 핑크 (핑크를 눌렀으므로 핑크가 이벤트 발생 시점이 됨)
currentTarget -> 노랑 (onClick 이벤트는 노랑이 갖고 있음)
– 노란 부분을 클릭
target -> 노랑(노랑을 눌렀으므로 노랑이 이벤트 발생 시점이 됨)
currentTarget -> 노랑(onClick 이벤트는 노랑이 갖고 있음)
따라서 노랑을 누르면 ‘div clicked’, 핑크를 누르면 ‘span clicked’ 알림창을 띄웁니다.
만약 핑크를 눌러도 이벤트를 가진 노랑의 속성에 접근하고 싶다면 currentTarget과 getAttribute를 사용하면 됩니다.
<style> .upper{ background:gold; width:80px; text-align:center; } .lower{ background:pink; width:50px; } </style> <script> function clicked(event){ alert(event.currentTarget.getAttribute('id')+" clicked"); } </script> <div class="upper" onClick="clicked(event)" id="div"> <span class="lower" id="span"> span </span> </div>
위 코드는 핑크, 노랑 둘 다 이벤트를 가진 노랑 속성에만 접근합니다.
target은 누른 바로 그 것, currentTarget은 이벤트를 실행하는 바로 그 것으로 이해하면 될 것 같습니다.
target과 currentTarget는이벤트핸들링과 이벤트 캡쳐와 함께 이벤트 발생 관련하여 중요한 속성과 개념입니다.
백문불여일코드(code)이므로 코드를 통해 확인하고 연습하는 습관을 기르면 어제의 정보가 내일의 나의 무기가 될 수 있을 것이라고 생각합니다.
2 thoughts on “target과 currentTarget, 차이가 뭘까?(feat.자바스크립트)”
Comments are closed.