리팩토링 : 해시태그를 작성하는 input태그에서 엔터누르면 새로고침되던문제

위와 같이 해시태그에서 엔터를 누르면 그냥 새로고침되고 작성도 되지 않던 버그가 있었다.

 

이벤트버블링, 이벤트 위임인가 했다.

 

이 버그를 해결하면서 이벤트 버블링, 이벤트 위임을 강제로 공부하였다..

이에 관해서는 리팩토링 끝나고 먹구름같은 개념들을 더 명확히 하여서 블로깅하기로 하겠다

 

하여튼 e.preventDefault(), e.stopPropagation()을 경로상의 모든 곳에 호출해보고 return false를 여기저기 넣어보는 등 오랫동안 별짓을 다해봤지만 뻘짓이었다.

 

스트레스 받아서 멍때리다가 설마..하는 생각이 스쳤다..

 

form을 div로 바꿔보았더니 해결되었다...

 

하..

<form>  -->   <div>로 바꿈
..(생략)..

	<input type =text ... />
    
..(생략)..    
</form>   -->   마찬가지로 </div>로 바꿈

 

 

원래 모든 버그는 간단한게 원인인건가?

 

원인

여튼 요약하면 원인은 form 태그 내부에 있는 input text box에서 엔터키를 누르면 자동 submit이 되면서 페이지 재로드 되는 것

 

해결

form태그를 div로 바꿔줌.. 간단..

 

알게된거 

• event.stopPropagation() : 이벤트가 상위DOM으로 전달되는 버블링을 막는다. 기본 이벤트를 막아주진 않음

 

• event.preventDefault() : 기본 등록된 이벤트를 작동하지 못하게 함. <a> <input> <textarea>의 기본동작을 막는다. 이벤트전파(버블링 캡처)를 막지는 않는다.

 

---

아래 내용은 버그 해결하려고 이거저거 다 뒤져보다가 본 내용인데

 

위에 작성한 버그랑은 별개로 앞으로 쏠쏠하게 써먹을 수 있을듯

 

 

type	설명	예시	스펙
month	연과 월 지정할 수 있는 컨트롤 시간대는 지정못함		HTML5
range	값이 가려진 숫자를 입력하는 컨트롤, 디폴트 값이 중간값인 범위 위젯으로 표시 min과 max사이에 수용가능한 값의 범위 정의		HTML5
url	URL을 입력하는 필드. 입력이 URL 형태를 갖추지 않는다면 유효성에 어긋나기 때문에 submit 버튼을 눌러도 제출되지 않는다.  -> 유효성검사 프론트에서 안만들어도 되는건가??		HTML5
week	시간대가 없는 주-년 값과 주의 값을 구성하는 날짜를 입력하는 컨트롤입니다.		HTML5
tel	전화번호를 입력하는 컨트롤. 몇몇 장치에서 동적 키패드들과 전화번호 입력기를 표시한다.		HTML5

출처 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input