마우스와 포인터 이벤트
HTML 구조.
CSS 구조.
아직 HTML 코드에는 'active'라는 클래스는 없는 상태.
1. click
child 요소를 클릭할 시, 'active' 클래스가 없으면 추가하고, 있으면 제거하는 'toggle' 기능을 사용.
child 요소를 한 번 더 누르면 내부 색이 다시 바뀜.
2. dblclick
더블 클릭 시 이벤트.
클릭 이벤트와 동작 결과는 같으나, 더블 클릭 시에만 이벤트가 작동.
3. mousedown, mouseup
child 요소에 마우스를 누르고 있을 시, 'active' 클래스 추가. 마우스를 뗄 시 'active' 클래스를 제거하는 코드.
4. mouseenter, mouseleave
마우스를 child 요소 위에 올릴 시, 'active' 클래스 추가. 마우스가 child 요소를 벗어날 시 'active' 클래스 제거. css의 hover 가상 클래스 선택자와 유사.
5. mousemove
child 요소 위를 왔다갔다 할 때마다 event 객체가 출력됨. 살펴보면, 마우스와 관련된 정보들이 속성으로 표시되어 있다.
6. contextmenu
child 요소에 우클릭 누를 경우, 이벤트 객체가 출력.
우클릭 시 나타나는 메뉴도 기본 동작에 해당하므로 preventDefault 메소드를 사용하면 제어할 수 있다. 
메뉴가 나타나지 않고, 이벤트 객체가 출력됨.
7. wheel
deltaY 값이 양수이면 스크롤이 아래로 내려가는 상황, 음수이면 스크롤이 위로 올라가는 상황... etc 여러가지 휠 이벤트 정보들에 대해 알 수 있다. window 객체 또한 이벤트 리스너를 추가할 수 있음.
雲外蒼天