[javascript] 이벤트 질문

조회수 493회

안녕하세요. 아래의 코드는 https://codepen.io/w00kgod/pen/XGbpwy 이 링크의 코드 일부입니다.

input.addEventListener('change',function(){
  console.log(input.value)
});

cities 라는 변수에 fetch함수를 이용해서 정해진 url에 담긴 json 파일을 가져와야 하므로 addEventListener 에 콜백함수를 추가하여 이 콜백함수 내부에서 input.value가 포함된 도시나, 주가 있는지 확인하려고 합니다.

그런데 input.value가 잘 담겼는지 확인하려고 addEventListener안에 우선 console.log를 찍어보았는데요. 여기서 입력한 후에 마우스를 클릭하면 input.value가 잘 출력이 되는데요. 입력한 후에 엔터를 누르면 input.value가 출력이 되었다가 사라집니다. 질문1) 이것은 왜 그런것인가요?

console창에서 네트워크창을 보니 새로운 index.html이 생성되었다가 사라지는것을 볼 수 있었는데요. 질문2) 엔터를 누르면 왜 index.html이 생성되었다가 사라지는 것인가요?

질문 읽어주셔서 감사합니다!

  • (•́ ✖ •̀)
    알 수 없는 사용자

1 답변

  • 두 질문의 답은 하나입니다. 기본 동작치고는 정말 놀라운 것인데, 폼 안에 버튼이나 submit 요소가 없더라도, 폼 안에 <input type="text">만 덜렁 있을 때는, 여기다 대고 엔터를 치면... 그 폼이 제출돼 버리거든요!!!
    그리고 지금 주신 폼은 별도로 action 속성이 없으므로, 기본값인 자기 자신의 주소를 action으로 사용하기 때문에, 결과적으로 "새로운 index.html"이 생성되었다가 사라지는 것처럼 보이는 겁니다. (폼이 포함된 미리보기 페이지가 index.html로 끝나는 것을 확인하세요.)

    이 문제(?)의 원인, 대책 등을 더 알아보기: https://blog.outsider.ne.kr/292

    • submit 으로 서버에 데이터를 보낼 수 있고, action으로 form에서 보낸 데이터를 저장할 수 있는 주소를 지정할 수 있군요... 그러면 서버에 데이터가 저장되면서(?) 그 데이터를 action에 위치한 주소에서도 가질 수 있도록 하는것인가요? 웬지 제 생각으로는 .. get 방식에서 url뒤에 데이터가 저장된다고 해서 action에 있는 주소파일에서 데이터를 가지고 있을것같지는 않은데 ... 왜냐면 action에 있는 주소파일은 클라이언트 파일이기 때문에.. 서버에 있는 파일을 전달해줄것같진 않아서요. post 방식으로 보낸 데이터를 가져오려면 서버에 다시 접근을 해야할까요? 알 수 없는 사용자 2019.2.28 09:46
    • 음.. 이건 완전히 별개의 다른 질문이네요. HTML 폼이 작동하는 기본 원리를 참고하세요. https://www.w3schools.com/html/html_forms.asp 엽토군 2019.2.28 12:41

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)