preventDefault()

koom·2022년 6월 23일

Javascript

목록 보기
3/7

preventDefault: 브라우저가 기본 역할을 못하게 만듦

🟠 functionName과 functionName()의 차이

// 아래의 경우에는 submit이라는 이벤트 클릭 리스너가 작동했을 때, onLoginSubmit함수가 실행되는 것
loginForm.addEventListener("submit", onLoginSubmit);

// 아래의 경우에는 내가 임의로 onLoginSubmit함수를 실행시키는 것
onLoginSubmit();

🟢 preventDefault(form의 submit)

// 아래 클릭 이벤트 시(submit) 자바스크립트가 제공하는 기본 정보를 받으려면 매개변수(이름은 마음대로 해도 되나 관례는 event로 함)
function onLoginSubmit(event) {
	event.preventDefault(); 	// 이렇게 사용함. 브라우저의 기본 역할(form submit 후 새로고침)을 막아줌
}

// loginForm을 submit하게 되면 브라우저가 onLoginSubmit함수를 실행시키는데
// onLoginSubmit(여기)에 submit이용 시 자바스크립트가 기본 정보들을 제공해 줌
loginForm.addEventListener("submit", onLoginSubmit);

🟣 preventDefault(a의 href)

// click 시 자바스크립트가 제공해주는 기본 정보를 제공받고 싶다면 매개변수를 하나 추가해 주면 됨.
function handleLinkClick(event) {
    event.preventDefault();	// a태그의 href 속성(링크 이동)이 막히게 됨
}

link.addEventListener("click", handleLinkClick);

0개의 댓글