제이쿼리 change() 이벤트 알아보기

자바스크립트를 사용해 이벤트를 동작하기 위해서는 addEventListner() 라는 함수가 존재한다. 이벤트를 구현할 경우 제이쿼리를 사용하면 간단한 방법으로 이벤트를 제어할 수 있는데 대표적인, bind(), on(), 메소드 외에 change() 메소드에 대하여 알아보자.

해당요소.change(실행할 코드);

change() 메소드는 해당하는 요소의 value에 변화가 생길 경우 이를 감지하여 등록된 콜백함수를 동작시킨다. 해당 코드는 input, textarea, select 태그에 동작한다. 그럼 간단한 예제를 통해 알아보자. 아래는 input 태그에 발생된 이벤트로 특정 함수가 동작하는 예제 소스이다.

# change() 메소드를 사용한 input 파일 첨부 이벤트 함수 동작하기

우리가 만들고자 하는 것은 파일이 첨부될 경우 파일 첨부가 완료되었음을 알리는 알림창을 띄우는 간단한 코드를 만들고자 한다. 아래 예제를 확인해보자.


아래는 이벤트를 동작시킬 스크립트 코드이다.


해당 코드는 파일 첨부에 사용되었으나 이 이벤트 메소드를 활용하여 여러가지 다양한 이벤트를 구현 동작시키는 일이 가능하다.