8. 이벤트 사용하기
① 이벤트(event)는 웹 브라우저와 사용자 사이에 상호작용이 발생하는 특정 시점을 의미합니다. 자바스크립트로 이벤트 종류에 따른 제어 작업을 할 수 있습니다.
② 주요 이벤트는 다음과 같습니다.
|
구분 |
이벤트 |
설명 |
|
마우스 이벤트 |
onclick |
마우스로 클릭하면 발생합니다. |
|
ondblclick |
마우스로 두 번 빠르게 클릭하면 발생합니다. |
|
|
onmouseover |
마우스 포인터를 올리면 발생합니다. |
|
|
onmouseout |
마우스 포인터가 빠져나가면 발생합니다. |
|
|
마우스 이벤트 |
onmousemove |
마우스 포인터가 움직이면 발생합니다. |
|
onwheel |
마우스 휠(wheel)을 움직이면 발생합니다. |
|
|
키보드 이벤트 |
onkeypress |
키보드 버튼을 누르고 있는 동안 발생합니다. |
|
onkeydown |
키보드 버튼을 누른 순간 발생합니다. |
|
|
onkeyup |
키보드 버튼을 눌렀다가 뗀 순간 발생합니다. |
|
|
포커스 이벤트 |
onfocus |
요소에 포커스가 되면 발생합니다. |
|
onblur |
요소가 포커스를 잃으면 발생합니다. |
|
|
폼 이벤트 |
onsubmit |
폼이 전송될 때 발생합니다. |
|
리소스 이벤트 |
onload |
웹 브라우저의 리소스 로드가 끝나면 발생합니다. |
9. 이벤트 객체와 this
① 이벤트 객체는 이벤트 함수가 호출될 때 내부적으로 전달되는 이벤트 정보가 담긴 객체를 의미합니다.
② 이벤트 객체의 preventDefault() 메서드를 사용하면 태그에 적용된 기본 이벤트를 취소할 수 있습니다.
③ 이벤트 함수 내부에서 this 키워드를 참조하면 이벤트를 발생시킨 요소 노드를 가리킵니다. 단, 화살표 함수일 때는 이벤트 객체의 target 속성으로 참조해야 합니다.