이벤트 처리기

• 이벤트 처리기

 웹 문서에서  이벤트가 발생했을 때 어떤 함수를 실행해야 할 지 웹 브라우저에 알려 주어야 합니다. 이때 이벤트와 이벤트 처리 함수를 연결해 주는 것을 "이벤트 처리기" 또는 "이벤트 핸들러(Event Handler)"라고 합니다. 이벤트 처리기는 이벤트 이름 앞에 on을 붙여서 사용합니다. 예를 들어 click 이벤트가 발생했을 때 이벤트 처리기는 onclick 다음에 있는 실행 명령이나 함수를 연결합니다.

 

• 이벤트 처리기로 <button> 태그에 함수 연결하기

- 웹 화면에 생성된 버튼을 커서로 클릭하면 알림 창이 표시됩니다.

 

• <button> 태그에 미리 만들어 둔 함수 연결하기

-HTML 예제 소스

 

1-1. 함수를 사용할 HTML단에 <script>태그를 사용하여 event.js 연결.

1-2. 먼저 버튼을 눌렀을 때 실행할 함수 javaScript단 작성.

1-3. 버튼에서 onclick 이벤트가 발생하면 onclick 이벤트에 연결된 함수 실행.

1-4. 버튼에서 onclick 이벤트가 발생하면 onclick 이벤트에  연결된 함수 실행.

1-5. 웹 브라우저 화면 확인

 

• 여러 이벤트 처리기 연결하기

-HTML 예제 소스

 

2-1. 함수를 사용할 HTML단에 <script>태그를 사용하여 event-dom-result.js 연결.

2-2. id="cover"에 이미지를 삽입.

2-3. querySelector()함수를 사용해 id="cover"인 이미지를 가져와 coverImage 변수 에 저장 합니다. 그리고 click 이벤트가 발생했을 때 실행할 함수를 다음과 같이 작석합니다. 이때 function 예약어 뒤에 함수 이름이 붙는데 이것을 익명함수라 합니다.

2-4. 소스에 만든 이미지를 눌렀을 때 [눌렀습니다.] 라는 알림 창이 표시될 것입니다.

2-5. 그리고 이미지 위로 커서를 올리면 coverImage에서 mouseover 이벤트가 발생하고 5px의 검은색 테두리가 그려집니다. 이후 커서를 치우면 테두리가 없어지는 소스 입니다.