[JavaScript] event[2] - EventListener, preventDefault

가끔은 event 의 기본 동작을 막아줘야 할때가 있다.

 

뭐가 클릭됐는지, 어디가 클릭됐는지와 같이 말이다.

 

eventListenr 함수의 두번째 인자로 함수'명'만 주고 () 소괄호는 치지 않는 것은,

소괄호를 치면 한번 실행되고 끝인건데

실행하는 건 JS의 몫이다.

 

JS는 이벤트리스너 함수의 첫번째 인자에 방금 일어난 일에 대한 정보를 Object 형태로 담아준다.

 

function handleClick(event){

 

}

 

element.addEventListener("type of event ex. click", handleClick)

 

handleClick({information about the event that just happened})

 

방금 일어난 이벤트에 대한 정보가 담긴 Object는 JavaScript가 그냥 주는 것이다.

 

콘솔에 출력되는 ~~~Event는 어떤 event에 대한 리스너이냐에 따라 다르다.

지금과 같은 클릭에는 마우스 커서의 위치값같은 것 또한 들어있다.

 

이벤트로 부터 얻을 수 있는 다양한 값들이 있고,

다양한 이벤트 들이 있다.

 

 

event.preventDefault() 함수로 인해 <a>의 링크를 아무리 클릭 하여도 연결된 페이지로 이동하지를 않는다. 왜냐하면 이게 기본동작을 막고 있기 때문이다. brower는 default로 link를 클릭시 이동하도록 되어있는데 이를 막고 있는 것이다.