웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > jquery

함수에서 event 객체의 target 속성 지정한 요소를 제이쿼리로 컨트롤

Last Modified : 2017-08-28 / Created : 2015-12-21
5,515
View Count
제이쿼리를 사용해 이벤트 제어시 이벤트를 발생시킨 요소에 대하여 컨트롤 하는 경우 $(this) 키워드를 사용한다. 이때는 당연히 이벤트를 실행시키는 함수가 필요할 것이고 그 안에서 제이쿼리로 지정된 특정 요소를 컨트롤하기 위해 event.target을 사용하기도 하지만 가장 많이 쉽게 사용하는 부분이 바로 $(this)라는 키워드 선택이다.

참고... 함수에서 이벤트가 발생하는 경우 객체 안에서의 this는 객체의 프로토타입을 나타내지만 함수 안에서는 해당하는 요소를 this의 값으로 가지고 반환한다. $(this)는 제이쿼리를 통한 이벤트 생성시 반환되는 요소이다. this는 $(this)[0]과 같다.

궁금한 부분이 있었으니 만약 제이쿼리(jQuery) 이벤트를 통해 실행된 이벤트 함수에서 event.target을 통해 정해진 특정 요소가 제이쿼리 요소로서 컨트롤이 가능한지가 궁금하였다. 이에 대하여 테스트를 해보았고 결론은 다른 제이쿼리 요소와 같이 제이쿼리 메소드 및 속성 지정이 불가능하였다... 하지만 animte() 메소드는 존재하였는데 animate()는 분명 제이쿼리 요소가 아닌가? 어쨌든... 
 
예를들어 아래와 같은 이벤트가 발생하였고 한다면...

var test = $('body');
   test.on("keyup mouseup", function(event){
   var element = event.target
;});

body요소를 통해 발생한 이벤트에서 element라는 변수에 event.target으로 이벤트에 사용된 요소를 설정하였다. 이 요소는 제이쿼리 요소로써 제이쿼리를 통한 콘트롤이 안된다... 가능한 메소드 및 속성 지원이 안된다는 것이다. 왜 animte() 메소드는 나오는지 이유를 아직 못찾았다.

Previous

[제이쿼리 UI] 캘린더 UI datepicker 한글로 변경하기, 로컬라이제이션

Previous

[제이쿼리] 이벤트 mouseup 그리고 click 이벤트의 차이점은?