[JS] event - EventListener 실행 시 실행 함수의 파라미터

노마더코더의 바닐라 JS로 크롬 앱 만들기 강의를 들으며 필요해보이는 것만 대충 적은 글입니다.

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

function handleLinkClick(event) {
  event.preventDefault();
  console.log(event);
}

link.addEventListener("click", handleLinkClick);

 

link에서 click 이벤트를 감시하는 EventListener를 붙여주면 click 이벤트가 발생시 handleLinkClick함수가 실행된다.

handleLinkClick 함수가 실행 시 실행되는 event를 담은 객체를 handleLinkClick 함수의 파라미터로 주게 된다.

 

+) array.forEach(function)

인 경우에도 function의 인자로 array의 성분들을 파라미터로 전달해준다.

 

preventDefault()

 event 객체 내에는 함수도 같이 들어있는데 그 중 preventDefault() 함수는 event의 기본 동작을 막는 함수이다.

form을 통해 submit 이벤트가 발생했다면 기본 동작인 새로고침을 막고

a 태그라면 페이지 이동을 막는다.

 

a태그 클릭시 pointerEvent

form 전송 시 submitEvent

target - parentElement

 

위와 여러 개의 항목이 있을 경우 X 버튼을 눌렀을 때 어떤 항목이 클릭되었는지 알 수 없다.

이 경우 event의 target 속성을 통해 클릭된 것을 알 수 있고 parentElement를 통해

클릭된 item의 상위 부모를 알 수 있다.