[ Javascript ] 이벤트

이벤트

웹 브라우저에서 사용자가 화면을 클릭 하거나, 키보드를 클릭하거나 하는 다양한 일들이 일어납니다. 이러한 일들을 이벤트(Event)라고 부릅니다.

 

용어

• 이벤트 이름 : 이벤트의 이름을 나타냅니다.
• 이벤트 속성 : 특정 요소(태그)에 이벤트를 직접 연결할 때 활용하는 속성을 나타냅니다.
• 이벤트 리스너 또는 핸들러 : 특정 요소(태그)의 이벤트 속성에 연결한 함수를 나타냅니다.
• 디폴트 이벤트 : 요소(태그)가 가지고 있는 기본적인 이벤트를 나타냅니다. 예로 'a 태그를 클릭하면 href 속성에 정의한 곳으로 이동한다.' 등이 있습니다.
• 이벤트 모델 : 이벤트를 연결하는 방법을 나타냅니다. 최신 웹 브라우저는 '표준 이벤트 모델', '인라인 이벤트 모델', '기본 이벤트 모델'을 지원하지만, 구버전의 인터넷 익스플로러는 '마이크로소프트 인터넷 익스플로러 이벤트 모델', '인라인 이벤트 모델', '기본 이벤트 모델'을 지원합니다. 따라서 모든 웹 브라우저에서 정상적으로 이벤트를 사용할 수 있게 하려면 구버전과 최신 버전의 차이를 보완하는 방법이 필요합니다.

 

이벤트 종류

이벤트는 키보드를 이용해 버튼을 입력하거나, 마우스 클릭과 같이 다른 것에 영향을 미치는 것을 의미합니다.

• 마우스 이벤트
• 키보드 이벤트
• HTML 프레임 이벤트
• HTML 입력 양식 이벤트
• 유저 인터페이스 이벤트
• 구조 변화 이벤트
• 터치 이벤트

 

이벤트 관련 용어 정리

 

window 객체의 load 이벤트

window.onload = function() {};

이렇게 window 객체의 onload 속성에 함수 자료형을 할당하는 것을 '이벤트를 연결한다'고 합니다.

이때 load를 이벤트 이름 또는 이벤트 타입(Event Type)이라고 하며 onload를 이벤트 속성이라고 합니다. 또한 이벤트 속성에 할당한 함수를 이벤트 리스너(Event Listener) 또는 이벤트 핸들러(Event Handler)라고 합니다.

 

이벤트 용어 연습 예

<h1 id="header">Header</h1>

window.onload = function() {
    var header = document.getElementById('header');

    function whenClick() {
        alert('click');
    }
    header.onclick = whenClick;
}

두 가지 이벤트를 연결했습니다. window 객체는 전과 같으며 header 객체의 이벤트 이름은 click, 이벤트 속성은 onclick, 이벤트 리스너는 whenClick() 함수 입니다.

 

header 객체

• 이벤트 이름 : click
• 이벤트 속성 : onclick
• 이벤트 리스너 : whenClick() 함수

문서 객체에 이벤트를 연결하는 방법을 이벤트 모델이라고 합니다. 이벤트 모델은 아래처럼 DOM Level 단계에 따라 두 가지로 분류할 수 있고, 다시 두 가지로 각각 나뉩니다. 따라서 총 네 가지 방법으로 이벤트를 연결할 수 있습니다.

• DOM Level 0
  - 인라인 이벤트 모델
  - 기본 이벤트 모델
• DOM Level 2
  - 마이크로소프트 인터넷 익스플로러 이벤트 모델
  - 표준 이벤트 모델