Event에 대해 알아보자

Event

Event 인터페이스는 DOM내의 이벤트를 나타낸다

기본적으로 EventTarget.addEventListener()를 사용해 다양한 요소에 이벤트를 부착하고 사용 할 수 있다
그리고 추가 후 EventTarget.removeEventListener()를 통해 제거 할 수 있다

addEventListener

설정된 타입의 이벤트가 대상에 전달 될 때 마다 해당 핸들러 함수를 호출합니다

// 추가
target.addEventListener(eventType, handlerFunction);
// 삭제
clock.removeEventListener(eventType, handlerFunction);
// 삭제시 타입과 핸들러 함수를 통해 식별함

type

어떤 이벤트인지를 결정한다
예를 들어 마우스로 클릭 했을 때 라는 이벤트를 받기 위해선 click 이라는 타입을 적어야 한다

이벤트 종류는 정말 다양하지만 그 중에서도 키보드, 마우스 이벤트는 숨 쉬듯이 사용함으로 알고 있는 것이 좋다

key event

• keydown : 키가 눌렸을 때
• keypress : shift, Fn, CapsLock을 제외한 키가 눌리고 있을 때
• keyup : 키에서 손을 땠을 때

mouse event

• mouseenter : 해당 요소에 위에 왔을 때
• mouseover : 해당 요소 위에 왔을 때
• mousemove : 해당 요소에서 움직일 때
• mousedown : 눌렀을 때
• mouseup : 놓았을 때
• click : 클릭 (눌렀다가 놓았을 때)
• dblclick : 더블 클릭
• contextmenu : 우클릭
• wheel : 휠을 돌릴 때

위 이벤트 중에 mouseenter와 mouseover의 차이점은 enter는 해당 요소만 적용되고 over는 해당 요소의 자식에게도 적용이라는 점이다

핸들러 함수

addEventListener의 두번 째 인자로 핸들러 함수(콜백함수)가 들어 오는데 이 함수 안에서 이벤트를 받았을 때 일어나야할 일을 코드로 적는다

target.addEventListener("click", () => console.log("클릭"));

위 처럼 익명 함수로 해도 되고 따로 함수를 만들어서 넣어도 된다

const getClick = () => console.log("클릭");
target.addEventListener("click", getClick());

이벤트 객체 참조

핸들러 함수의 첫번 째 인자를 통해 이벤트 객체를 가져와 확인 할 수 있다
이벤트 객체를 가져오는 것임으로 대부분 e 또는 event라고 네이밍을 한다

target.addEventListener("click", (e) => console.log(e));

객체에서 필요한 속성을 사용하거나 변경할 수 있다

끝~