HTML DOM 이벤트와 이벤트 처리

자바스크립트 프로그램에서는 이벤트 주도 프로그래밍(event-driven programming) 모델을 사용하며, 웹 브라우저ㅇ는 HTML 이벤트를 생성하고, HTML DOM은 자바스크립트가 HTML 이벤트에 반응하게 한다.

이벤트와 이벤트 타입

자바스크립트에서 특정 HTML 이벤트가 발생하면 브라우저에서는 자바스크립트 함수나 코드 조각에 해당하는 이벤트 핸들러(event handler)를 호출한다. 사용 가능한 다양한 이벤트 핸들러는 다음과 같다.

속성 형태의 이벤트 핸들러

자바스크립트에서 이벤트 핸들러는 HTML 속성으로 지정할 수도 있는데, 이벤트 핸들러의 값은 자바 코드로 구성된 임의 문자열이면 된다. 핸들러가 여러 자바스크립트 구문으로 구성돼 있다면 각 구문을 세미콜론으로 구분한다. 다음 예제를 보자.

<input type="button" value="Press Me" onclick="alert('thanks');">   

<form action="processform.action" onsubmit="return validateForm();">

<body onload="startApp()">

프로퍼티 형태의 이벤트 핸들러

자바스크립트에서는 이벤트 핸들러를 DOM 엘리먼트의 프로퍼티로 할당할 수 있는데, 이벤트 핸들러 프로퍼티에 원하는 함수를 설정한다. 다음 예제를 보자.

document.getElementById('button1').onclick = function(){alert('thanks');};

function startApp(){...} 
document.onload = startApp;

이벤트 핸들러와 this 키워드

이벤트 핸들러를 HTML 속성으로 정의하든 자바스크립트 프로퍼티로 정의하든 함수를 document 엘리먼트의 프로퍼티로 할당하는 셈이다. 다시 말해 document 엘리먼트에 새로운 메서드를 정의하는 것이다. 이벤트 핸들러가 호출되면 이벤트가 발생한 엘리먼트의 메서드로서 해당 이벤트 핸들러가 호출되고, 따라서 this 키워드는 대상 엘리먼트를 가리킨다.

관련 수업

← 이전홈다음 →