특정 DOM 객체의 요소에서 이벤트가 발생한 경우 해당 요소를 가져오는 방법에 대하여 알아보겠습니다. 자바스크립트의 경우 event.target 키워드를 사용하여 아래와 같이 사용할 경우 해당하는 이벤트 DOM 객체를 불러옵니다. 가장 일반적인 사용방법입니다.


<span id="test" onclick="javascript:color():">텍스트색 변경 Click !</span>

<script type="text/javascript">
var color = function(event) {
   var thisEle = event.target;
   thisEle.style.color = 'red';
}
</script>

위 코드는 일반적인 자바스크립트를 사용한 방법으로 클릭 이벤트로 발생한 DOM 객체를 event.target 키워드를 사용하여 thisEle 변수에 저장했습니다. 그 뒤에 해당 요소에 빨간색 폰트색상을 적용한 코드입니다.


이 경우 전달받은 DOM 객체는 제이쿼리 객체가 아니기 때문에 DOM 메소드를 사용할 수 없습니다. 어떻게 하면 제이쿼리 요소로 적용할 수 있을까요? 바로 $(event.target)를 사용하는 방법입니다.


$(event.target)

위 코드를 사용하여 이벤트를 전달받으면 전달된 DOM은 제이쿼리 객체로 제이쿼리 사용이 가능합니다. 그럼 이를 사용해 위 코드를 변경해 보겠습니다.


! $(event.target) 사용한 예제코드 보기
<script type="text/javascript">
var color = function(event) {
   var thisEle = $(event.target);
   // thisEle 변수에 이벤트 객체를 제이쿼리 요소로 전달받음
   thisEle.css('color', 'red');
}
</script>

상황에 따라 둘 다 사용이 가능하나 제이쿼리를 사용할 경우 후자의 방법인 위의 방법을 사용하는 것이 좋을 것입니다.
# 실행된 예제보기

텍스트색 변경 Click !



위 버튼을 클릭하세요!!