[javascript] keyup event 와 change event 질문
조회수 1602회
안녕하세요. 아래의 링크의 코드는 입력한 단어를 포함한 도시가 있는지 찾고 화면에 출력하는 코드입니다. https://codepen.io/w00kgod/pen/XGbpwy
input 태그안에 입력이 발생한 후, 도시의 정보가 담긴 배열속에 입력한 값이 포함되어있는지 찾기 위해
input.addEventListener('change',function(){
const matchedArray = FindMatchesArray(input.value,cities);
displayMatchedArray(matchedArray);
});
와 같이 change 이벤트를 받았는데요. 이 경우 입력만 한 다음에는 화면에 출력이 안되고, 마우스로 다른곳을 클릭하던가 해야되더라구요.. 질문1 : 인풋에 키보드로 입력만 한것은 change 이벤트로 생각하지 않기때문인것같은데.. change 이벤트는 어떤 이벤트를 처리할때 사용하나요? 이 문제의 경우 change가 아니라 keyup 이벤트를 받아서 처리하는것이 맞는것같고.. change 이벤트는 주로 input의 변화가 있을때 사용한다고 하는데.. 변화중에서도 이렇게 keyup 으로 처리할 수 있는 변화가 대부분인것같아서 주로 사용하는 경우가 궁금합니다.
따라서 keyup 이벤트를 추가해 글자가 입력될때마다 출력이 일어나도록 만들어주었는데요.
input.addEventListener('keyup',function(){
const matchedArray = FindMatchesArray(input.value,cities);
displayMatchedArray(matchedArray);
});
질문2 : keyup 이벤트가 발생하고 나면 왜 input.value의 값이 저장되나요?
keyup 이벤트에 왜 input.value가 저장되는것인가요?
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
질문을 작성함과 동시에 2번의 답을 알게 되었습니다. input.value 는 이벤트이 종류와 상관없이 input 에 입력이 발생하면 value에 값을 저장합니다. 다만 저장된 value는 비동기적으로 클라이언트에 전달되기 때문에 addEventListener와 같은 함수로 전달되어야하는것이네요.
또한 change 이벤트는 input 밖에서 동작한다고 합니다. 따라서 change 이벤트로 코드를 작성하는경우 input 바깥을 마우스로 찍어주어야합니다.
-
(•́ ✖ •̀)
알 수 없는 사용자
- https://www.w3schools.com/jsref/event_oninput.asp 스스로 답을 내신거 같은데 그럼 이제 이거 보시면 좋을거 같네요. doodoji 2019.2.28 14:40
- 자답은 개추야! 엽토군 2019.3.1 09:57
-
댓글 입력