[JS] preventDefault 함수로 브라우저 링크(href) 기본 동작 제어

[ 노마드코더 학습 기록 ]

바닐라 JS로 크롬 앱 만들기(4.3 Events part Two)

---

브라우저에서 링크(href)의 기본 동작을 JS로 제어해보자

먼저 HTML 파일에  링크를 생성하는 코드를 추가한다.

 <a href="https://nomadcoders.co">Go to courses</a> 

 

이 상태로 코드를 실행하면 Go to courses 라는 링크를 누르자마자 페이지를 이동하게 된다.

이 기본 동작을 JS를 통해 제어해보도록 하자.

 

const loginForm = document.querySelector("#login-form")
const loginInput = document.querySelector("#login-form input");

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

function onLoginSunmit(event) {
    event.preventDefault();
    console.log(loginInput.value)
} 

function handleLickClick() {
    alert("clicked!!")
}

loginForm.addEventListener("submit", onLoginSunmit);
link.addEventListener("click", handleLickClick);

 const link = document.querySelector("a");  HTML의 링크를 찾아준다.

link를 클릭했을 때 alert창이 뜨는 함수를 만들어주고

 link.addEventListener("click", handleLickClick);  이벤트가 발생할 때 함수가 실행될 수 있도록 한다.

 

link를 클릭하면 alert창이 뜬다. alert이 page가 다른 동작을 하지 못하도록 막고 있다.

확인을 눌러야만 브라우저의 기본 동작이 실행된다.

 

지난 강의에서도 얘기했듯이 EventListener를 만들고 거기에 함수가 있다는 것을 JS가 보게 되면

JS는 누군가 링크를 클릭할 때, 함수를 실행시켜 준다. (매우 중요함!)

함수는 내가 실행시키는 게 아니다. 함수 뒤에 ()을 추가하면 한번 실행되고 끝나게 되는데 우린 이걸 원하는게 아니다.

우리가 할 일은 JS에게 함수의 이름을 주는 것. 실행하는 건 JS의 몫이다.

 

하지만 가끔 우리는 기본 동작을 막아야 할 필요가 있고, 뭐가 클릭됐는지 어디가 클릭됐는지 등 정보를 알고 싶을 때가 있다.

그럴때 JS는 단순히 함수를 실행시키기만 하는게 아니라 (   handleLickClick( )  )

JS는 함수를 실행시키는 동시에 그 함수에 첫번째 인자로  object를 넣어준다. (   handleLickClick( { } )   ) 

그리고 이 object에는 방금 일어난 event에 대한 여러가지 정보가 담겨있다. (   handleLickClick( { info about the event that just happend } )   )

 

function handleLickClick(event) {
    console.log(event);
    alert("clicked!!");
}

 즉, 방금 일어난 event에 대한 정보를 담은 이 object는 handleLickClick을 위한  EventListener함수의 첫번째 인자로 주어지게 된다. 

우리는 그저 자리를 제공해주고 ( ) 공간을 만들고 받기만 하면 끝.

 

실행시키면 이렇게 PointerEvent인 것을 확인할 수 있다.

강의에서는 MouseEvent로 표시되는데 그 이유는 브라우저의 차이이다.

엣지 : PointerEvent 크롬 : MouseEvent

 

니꼬쌤 강의 화면

니꼬쌤은 MouseEvent로 마우스 클릭 위치가 X,Y 좌표로 표시되는데 PointerEvent라 그런지 나는 x,y좌표를 확인할 수 없었다.

 

우리가 최종적으로 해야하는 일은 브라우저의 기본동작을 막는 것이다.

현재 링크를 클릭하면 연결된 페이지로 바로 이동하게 된다.

이 기본 동작을 막아보도록 하자.

function handleLickClick(event) {
    event.preventDefault();
    console.dir(event);
}

function에  event.preventDefault();  추가 그리고  console.dir(event) 를 통해 event의 내부를 살펴보자.

 

이제 링크를 눌러도 기본 동작이 막혔기 때문에 연결된 사이트로 이동하지 않는다.

event 내부에는 아까 확인할 수 없었던 X,Y 좌표도 있고 path를 통해 우리가 클릭할 때 무슨 일이 있었는지, 

어디서 발생했는지 array를 통해 보여주기도 하는 등 정말 여러가지의 정보가 있다.

defaultPrevented: true를 보면 우리가 브라우저가 하려는 동작을 허용하지 않고 막아버렸다는 것을 알 수 있다.

이것이 바로! event를 활용하는 방법이고 preventDefault를 사용하는 이유이다!!!!

---

 니꼬쌤만 믿고 강의를 따라갔더니 저번 강의에서는 이해못했던 부분을 이해버리고 말았다!

도동탁!

개발자가 되기 위해 여러가지 강의를 봤지만 이렇게 쉽고 재밌는 강의는 진짜 처음인 것 같다

재밌다 재밌어