[javascript / 자바스크립트] 이벤트가 발생한 대상(요소) 얻기 - event.target

event.target

 

event.target은 이벤트가 발생한 요소를 반환해준다. 

 

예를 들어

 

$("a").click(function(event){

      console.log(event.target);

});

이라는 코드는 a요소를 클릭했을 때 이벤트가 발생하고, 이벤트가 발생할 때마다 이벤트의 대상인 a요소를 콘솔창에 출력한다. 

 

 

이런 event.target을 이용하면 현재 이벤트가 발생한 요소의 속성들을 얻을 수 있다. 만약 이벤트가 발생한 대상의 id를 콘솔창에 출력하려면 다음과 같이 코드를 작성하면 된다. 

 

$("a").click(function(event){

      console.log(event.target.id);

});

 

 

 

event.target말고도 this라는 객체를 이용해 현재 이벤트가 발생한 대상을 가리킬 수 있다. 이때 주의할 점은 event.target과 this는 DOM 객체이고, jQuery 객체가 아니기 때문에 jQuery 메소드를 사용할 수 없다.

 

var myTarget = event.target;

이라는 변수가 있을 때, myTarget은 현재 이벤트가 발생한 요소를 가리킨다. 만약 이 요소의 색상을 변경하고 싶다면 myTarget.style.color = "red"; 와 같은 DOM 메소드를 사용해야 한다. 

 

 

그렇다면 어떻게 jQuery 객체로 요소를 받을 수 있을까? $(event.target) 또는 $(this)와 같은 작업을 해주면 된다. 

var myTarget = $(event.target);

라고 선언했다면, myTarget.css("color", "red"); 와 같이 jQuery 메소드를 사용할 수 있다. 

 

 

 

 

 

참고 사이트: https://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event

 

 

 

 

공부한 것을 정리한 내용입니다. 수정할 부분이 있다면 알려주시면 감사하겠습니다 :)