7. 이벤트(Event)와 이벤트 핸들러(EventHandler)
일반 응용 프로그램에서와
마찬가지로 웹 환경에서도 이벤트와 이벤트 핸들러를 제외하고 괜찮은 프로그램을 구현한다는 것이 거의 불가능할 정도로 이벤트, 이벤트 핸들러는 중요한 부분입니다.
이벤트(Event)란 웹사이트를 방문한 사용자가 수행하는 동작을 의미하며 이벤트 핸들러는
이러한 동작이 발생할 경우 처리할 실제 내용을 의미합니다.
예를 들어 사용자가 웹 브라우저를 실행하여 다음이나 네이버 같은 웹 포탈 사이트로 이동한 후 관심있는 기사를 읽기 위해서 헤드라인을
클릭하거나 자신의 이메일을 체크하기 위해서 아이디와 패스워드를 입력한 후 확인 버튼을 누르는 동작 같은 것들이 바로 이벤트라고 볼 수 있습니다.
그리고 사용자가 기사를 읽기 위해서 뉴스 헤드라인을 클릭하거나 이메일을 체크하기 위해서 확인 버튼을 클릭했을 때 해당 뉴스에 대한
헤드라인에 대한 세부적인 기사내용을 보여주거나 입력된 이메일 아이디에 대한 받은 편지함, 보낸 편지함
같은 해당 계정과 관련된 이메일 정보를 표시해주는 화면 보여주는 것과 같이 이벤트에 따른 후속 작업을 처리하도록 하는 코드가 들어 있는 객체(object)를 이벤트 핸들러 혹은 이벤트 리스너(Event Listener)라고
하며 일반적으로 함수(function)의 형태를 띱니다.
이해를 돕기 위해 이메일 로그인 과정을 화면에 나타내면 다음과 같습니다.
위 그림에서
보는 것처럼 사용자가 아이디와 패스워드를 입력하고 옆에 로그인 버튼(button)을 클릭(click)하는 이벤트에 대해서 내부적으로 이 이벤트에 반응하는 함수의 형태를 정의해놓고 그 안에 입력된 아이디와
패스워드에 대한 인증 처리 등과 같은 작업을 수행하도록 하는 것이 바로 이벤트 핸들러가 하는 일이라고 보면 됩니다.
이제 이벤트와 이벤트 핸들러를 실제 연결하는 방법에 대해서 알아볼까요? 일반적으로 이벤트에
이벤트 핸들러를 연결하는 방법은 2 가지 형태가 존재합니다. 하나는
이벤트 속성에 이벤트 핸들러를 연결하는 형태과 다른 하나는 DOM level 2 Event API를
이용한 방법입니다.
그러면 쉬운 것부터 차례대로 알아볼까요?
7.1 이벤트 핸들러
속성을 이용한 이벤트 처리
HTML 요소의 이벤트 핸들러 속성을 이용한 방법은 가장 단순한 이벤트 처리 방법입니다. 예를 들어 p 요소나 a 요소
같은 HTML 요소에 클릭(Click) 이벤트와 연관된 onClick 이벤트 핸들러 속성, 키보드를 누르면 발생하는 keypress 이벤트와 관련된 onkeypress 이벤트 핸들러
속성이 이미 정의되어 있으며 해당 이벤트가 발생하면 이벤트와 관련된 이벤트 핸들러 속성에 처리해줘야 할 코드를 포함하는 함수를 연결하는 방법입니다. 거의 대부분의 웹 브라우저에서 이러한 이벤트 핸들러 속성을 이용한 이벤트 처리를 지원하며 다음과 같은 형식을
사용합니다.
<script type=”text/javaScript”>
연결할함수이름() {
처리할 코드들;
}
</script>
</head>
<body>
<HTML요소 … 이벤트속성 = 연결할함수이름></HTML요소>
</body>
위 형식에서
보는 것처럼 하나의 HTML 요소 안에 onClick,
onkeypress와 같은 이벤트 속성에 실행할 함수이름을 명시하고 실제 함수 코드는
<script> … </script> 태그 블록 안에 명시하여 사용하는 형태입니다.
예를 들어 하나의 링크(link) 요소에 href 속성을
이용하여 이동할 웹페이지의 주소를 설정하고 onClick 이벤트 핸들러 속성에 a 링크 요소를 클릭(Click)하는 이벤트 발생시 처리해 줄 코드를
포함하고 있는 함수가 clickHandler라고 하면 다음과 같이 나타낼 수 있습니다.
<a
href="http://fromyou.tistory.com" onClick="clickHandler()"></a>
간단한 예제를 하나 해볼까요? 방금 전 a 요소를 이용한 예제입니다. 메모장을 열어서 다음과 같이 코드를
작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>a Click 예제 </title>
<script type="text/javascript">
function clickHandler()
{
alert("a 요소를 클릭함");
}
</script>
</head>
<body>
<a href="http://fromyou.tistory.com" onClick="clickHandler()">링크 클릭하기</a>
</body>
</html>
위와 같이 작성한 후 “aonclick.html”로 저장하고 IE9를 통해 보면 다음과 같이 나타납니다.
링크 클릭하기를 클릭하면 a 요소의 onClick 이벤트 속성에 연결된 clickHandler() 함수가 실행되어 다음과 같이 경고창에 “a 요소를 클릭함”이라고 나타내고 href 속성에 명시된 URL 페이지를 엽니다.
이와 같이 HTML 요소의 이벤트 핸들러 속성의 형태에 이벤트가 발생하면 원하는 기능을 하는 함수를 연결하여 이벤트 처리를
수행하므로 이를 인라인(inline) 이벤트 처리 모델이라고도 합니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 7.1.2 마우스(Mouse)와 관련된 이벤트 핸들러 속성 (0) | 2013.08.06 |
|---|---|
| 7.1.1 window와 관련된 이벤트 핸들러 속성 (0) | 2013.08.06 |
| 6.6 해쉬 테이블(HashTable) (0) | 2013.08.06 |
| 6.5 이차원 배열 (0) | 2013.08.06 |
| 6.4.4 join(), toString() 메서드를 이용한 배열을 문자열로 바꾸기 (0) | 2013.08.06 |