[JavaScript] Event

이전 글을 보고 오자.

HTML에 링크를 추가해준다.
<a href = "https://www.naver.com">Go to naver</a>

JS는 우리가 기본 동작을 막는 것을 허용한다.
이전에서 form의 기본 동작은 submit이라는 것을 배웠다. 그럼 링크의 기본 동작은 무엇일까?

바로 클릭 시 다른 페이지로 이동하는 것이다. 그걸 한 번 막아보자.

1. event

const link = document.querySelector("a");

funtion handleLinkClick () {
	alert("clicked!");
}

lick.addEventListener("click", handleLinkClick);

그럼 링크를 클릭했을 때 alert가 링크에 들어가지 못하도록 한다. alert의 ok 버튼을 클릭하면 링크로 들어가게 된다.

링크에 들어가는 것을 막기 위한 방법은 이 전 글에서처럼 preventDefault이다.

const link = document.querySelector("a");

funtion handleLinkClick (event) {
	event.preventDefault();
}

lick.addEventListener("click", handleLinkClick);

preventDefault로 동작을 막았기 때문에 더 이상 링크로 들어갈 수 없다.

여기서 잠깐! 정리를 한 번 하고 다음으로 넘어가자.

const link = document.querySelector("a");

funtion handleLinkClick () {
	alert("clicked!");
}

lick.addEventListener("click", handleLinkClick);

맨 마지막 handleLinkClick에서 handleLinkClick() 이렇게 괄호를 넣게 되면 함수를 직접 실행하게 되는데 이렇게 직접 실행하지 않는다. 이건 직접 하는게 아니라 브라우저가 해주는 것이다.

바로 아래처럼.

const link = document.querySelector("a");

funtion handleLinkClick () {
	alert("clicked!");
}

lick.addEventListener("click", handleLinkClick);

handleLinkClick();

맨 마지막 줄에 코드를 추가해주는 것! 이렇게 되면 브라우저는 실행만 시켜주는 것이 아니라 event에 대한 정보도 담아줄 것이다. 우리는 자리만 만들어 주고 몇 가지 함수도 같이 들어 있을 것이다.
그 중에 함수 하나가 바로 preventDefault!
이 함수로 기본 동작을 막아줄 수 있다.