사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 합니다. 예를 들어 버튼에 마우스 커서를 올렸을 때는 onmouseover 이벤트를 실행하고, 클릭했을 때는 onclick 이벤트를 실행합니다. Form 요소는 값이 바뀔 때 onchange 이벤트를 실행하죠. HTML을 사용한 적이 있다면 매우 익숙할 것입니다. HTML에서 DOM 요소에 이벤트를 설정하는 방법을 한번 살펴볼까요?
다음 코드를 HTML 파일로 저장하여(프로젝트 디렉터리 외부에 저장하세요) 웹 브라우저로 열어 보거나, JSBin(https://jsbin.com/)에서 코드를 입력하여 테스트해 보세요. 이 책에서는 JSBin을 사용하겠습니다.
test.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <button onclick="alert('executed')"> Click Me </button> </body> </html>