Front-end 개발 상식

자바스크립트 .target 이벤트가 발생한 대상(요소) 얻기

Sophie소피 2022. 6. 10. 09:50

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.targe과 this는 DOM 객체이고, jquery 객체가 아니기 때문에 제이쿼리 메소드를 사용할 수 없다.