[JavaScript] preventDefault 함수

2022. 9. 24. 14:19·JavaScript
함수를 실행할 때 단순히 그냥 실행하는 것이 아니고, 함수실행과 관련하여 브라우저에서 제공하는 어떠한 정보를 받아서 그것을 함수의 argument로 넣어서 실행할 수 있다. 그 첫번째 argument는 발생한 event(아래에서는 submit)에 대해 내가 필요로 할만한 정보들을 주는 것이다. 그러므로 argument 공간을 제공하여 JS가 정보를 지닌 argument를 채워넣어줄 것이다. 즉 받을 argument를 위한 공간을 아래와 같이 만들어주면 된다.

 

 
EventListener가 loginSubmit을 실행하면서 브라우저가 event에 대한 정보를 argument로 loginSubmit에게 담아준다. 그리고 그 정보 안에는 몇가지 함수도 같이 들어있고, 그 중에 하나가 preventDefault 함수이다. preventDefault 함수는 브라우저가 기본적으로 해당 함수를 실행할 때 수행하는 것들, 예를 들면 새로고침같은 것들을 막는 역할을 한다.
 
function loginSubmit(event) {
  event.preventDefault();
  console.log(loginInput.value);
  console.dir(event);
  console.log(event);
}

loginForm.addEventListener("submit", loginSubmit);
 

'JavaScript' 카테고리의 다른 글

[JavaScript] 함수 (익명 함수vs선언적 함수, 나머지 매개변수, 전개 연산자, 기본 매개변수)  (0) 2022.11.11
[JavaScript] 배열(Array), for/while 반복문  (0) 2022.11.10
[JavaScript] Event  (0) 2022.09.24
[JavaScript] 자바스크립트로 시계만들기  (0) 2022.09.24
[JavaScript] document  (0) 2022.09.01
'JavaScript' 카테고리의 다른 글
  • [JavaScript] 함수 (익명 함수vs선언적 함수, 나머지 매개변수, 전개 연산자, 기본 매개변수)
  • [JavaScript] 배열(Array), for/while 반복문
  • [JavaScript] Event
  • [JavaScript] 자바스크립트로 시계만들기
youjeong_choi
youjeong_choi
  • youjeong_choi
    youjeong
    youjeong_choi
  • 전체
    오늘
    어제
    • 분류 전체보기 (101)
      • HTML, CSS (7)
      • JavaScript (19)
        • 모던 자바스크립트 딥다이브 (4)
      • ReactJS (17)
      • TIL (15)
      • WIL (17)
      • 알고리즘 (17)
      • 네트워크 (5)
      • Vue (4)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    무한렌더링
    알고리즘
    항해99주특기리액트
    리액트
    모던자바스크립트딥다이브
    항해99리액트
    파이썬
    알고리즘 문제
    리액트 라우트
    항해99
    익명 함수
    피니아
    선언적 함수
    혼공스
    항해99주특기
    항해99리액트숙련주차
    항해99 주특기
    항해99 실전프로젝트
    자바스크립트
    리액트 라이프 사이클
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
youjeong_choi
[JavaScript] preventDefault 함수
상단으로

티스토리툴바