동적인 웹의 구현을 위해서는 다양한 이벤트를 적재적소에 활용할 줄 알아야 할 것이다.
우선 event란 키보드의 입력, 마우스의 클릭 등으로 특정 요소에 대해 어떤 사건을 발생시켜 상호작용하는 것을 말한다.
mouse event
- click : 요소에 마우스를 클릭했을 때
- dbclick : 요소에 마우스를 더블클릭했을 때
- mouseover : 요소에 마우스를 오버했을 때
- mouseout : 요소에 마우스를 아웃했을 때
- mousedown : 요소에 마우스를 눌렀을 때
- mouseup : 요소에 마우스를 떼었을 때
- mousemove : 요소에 마우스를 움직였을 때
- contextmenu : 요소에 마우스 우클릭했을 때
key event
- keydown : 키를 눌렀을 때
- keyup : 키를 떼었을 때
- keypress : 키를 누른 상태
form event
- focus : 요소에 포커스가 이동되었을 때
- blur : 요소에 포커스가 벗어났을 때
- change : 요소에 값이 변경 되었을 때
자주 사용하는 것 위주로만 적었음에도 엄청 다양한 이벤트가 있음을 알 수 있다.
DOM에서 이러한 event들이 발생되면 addEventListener로 이를 확인하고 이벤트 처리 핸들러를 추가할 수 있다.
즉 addEventListener를 사용하면 DOM에서 특정 event가 발생할 때 함수를 호출하는 것이 가능하다.
addEventListener 사용법은
document.addEventListener("keydown", myFunction); 형식으로 작성하면 되는데
내가 사용한 방법을 예시로 확인해보자. (myFunction은 실행할 함수명)
위의 코드를 직관적으로 바꿔 작성한 예시도 같이 보자. 
단축키 기능이 필요해서 작성한 코드인데 addEventListener로 keydown 이벤트를 감지하고,
특정 키가 눌렸을 때 각각의 함수를 호출하도록 설정한 것이다.
return false; 는 이벤트 전파를 방지한 것인데 기본적으로 내재된 단축키 이벤트를 막은 것이다.
(return false 외에도 이벤트 전파를 방지하는 방법으로 event.preventDefault(), event.stopPropagation 등이 있다.)
이벤트 리스너를 사용한다면 메모리 누수의 원인이 될 수 있기때문에 이벤트 리스너를 삭제하는 것도 생각하고 있어야한다.
특정 페이지에서만 사용되는 이벤트 리스너라면 해당 페이지를 사용하지 않을 때 이벤트 리스너를 삭제해주는 것이 좋다.
방법은 간단하다.
이벤트 리스너를 addEventListener로 추가해줬다면 removeEventListener로 제거해주면 된다.
