addEventListener 이벤트 (input & change)

 

 

자바스크립트에서 input 태그에 텍스트가 입력이 되면 버튼을 활성화하도록 만드는 작업을 하다가 Input 이벤트와 change 이벤트의 차이점을 알게 되어서 기록해둔다.

 

 

작동 방식

인풋 박스 두 개에 모두 텍스트가 입력되면 "확인" 버튼의 비활성화가 활성화로 바뀌는 로직

 

 

1. 먼저 두 개의 input 요소를 각각 element.getElementById 로 가져온다.

2. 각 요소에 대해 addEventListener 를 걸어서 어떤 이벤트가 발생할 때마다 어떤 동작이 수행되도록 만든다.

 

이때 input 에 입력되는 값 변화를 실시간으로 알기 위해서 처음에는 onChange 즉 , "change" 이벤트를 넣었다.

그러나, change 이벤트를 사용하면 input 의 값 변화가 커서를 input 태그 밖에 찍을 때를 기준으로 바뀌는 것을 확인할 수 있다.

 

검색해보니 change 이벤트의 경우 select 와 같이 동작의 종료 시점을 정확히 알 수 있을 때 실시간으로 값 변화를 확인할 수는 있지만, 텍스트를 값으로 받을 때는 커서로 영역 밖을 누르거나 인풋 박스에 대한 포커스가 사라져야 값이 반영되기 때문에 실시간 값 반영이 어렵다고 한다.

 

그러나 요소.onInput() 또는 addEventListener 에 input 이벤트를 추가하는 방식을 이용하면 input 태그에서 실시간으로 바뀌는 값을 확인할 수 있다.

 

change 이벤트	input 이벤트
동작의 종료 시점이 명확한 경우 사용 (ex. select)	input 태그 내에서 변화하는 값을 알고 싶을 때 사용
input 태그에 포커스가 사라지면 변화한 값 반영	input 태그에 값을 입력할 때 실시간으로 값 반영

 

---

 

자세한 건 mozilla 공홈 Web 부문에서 확인할 수 있다.

 

출처 : https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event