[ JavaScript ] 브라우저의 이벤트 기본동작 막기

하루입니다.

 

 

---

 

 

브라우저의 이벤트 기본동작 막기

브라우저의 대표적인 기본동작

링크를 클릭하면 (onclick이벤트가 발생하면) 해당 URL로 페이지를 이동시킨다.

폼 전송버튼(submit 버튼)을 클릭하면 (onsubmit 이벤트가 발생하면) 웹서버로 폼입력값을 제출한다.

 

<a href="http://www.daum.net" onclick="fn(event)"><img src="images/poster2.jpg" alt="포스터"></a>

function fn(e) {
            e.preventDefault();
            }

 

이 작업을 우리는 보통 [ (브라우저 없이) 자바스크립트를 이용한 서버와의 데이터 교환하기 ] 라고 한다.

1. 링크의 URL 정보 획득

2. 웹서버에 URL에 해당하는 데이터 요청

3. 데이터를 응답으로 받아서 HTML 컨텐츠 생성

4. 화면 이동이나 새로고침 없이 화면의 특정 영역에 3에서 생성한 HTML 컨텐츠 반영

5. 사용자는 화면의 이동이나 새로고침 없이 새 정보를 확인한다.

 

preventDefault는 말 그대로 default, 기본동작을 막아주는 것. 

 

아니 그래서. 왜 써요? 

 

화면을 요청(새로고침)하는 게 아닌 데이터를 받고 싶은 것임.

 

아니 그게 무슨 경우인데요 ... 

 

(조금 다른 예시일 수도 있음) 카카오맵에서 맛집을 검색했다. 엥 정경자순대국집이 있네요. 순대국집을 누르자 화면이 새로고침되지 않고 바로 맛집의 정보를 보여준다. 다른 예시로는 

 

 

 

이런 경우 아닐까. 하나 누를 때마다 화면이 바뀌는 게 아닌 정보만 불러오는 방식. 

 

 

 

폼입력값이 제출되는 것 막기

앞에서 말했듯 submit을 누르면 바로 제출된다.

 

방법 1. <button type="submit">

onsubmit="return forSubmit(); 사용해 입력값 유효성 체크 후 버튼 통해 제출한다.

 

방법 2. <button type="button" onclick="formSubmit2();"> 

button의 기본값은 제출이기에 type를 button으로 바꿔줬다. 클릭하면 함수가 실행되고, 이 함수에서 유효성 체크 후 값을 제출해준다.

 

 

 

---

 

 

 

 

잘못된 정보에 대한 지적은 언제나 환영입니다. 

 

복습 끝!