이벤트

책 <러닝자바스크립트>를 기본으로 배운 자바스크립트 내용입니다.

 

목차

• 1. 이벤트
• 2. 이벤트 루프(Event Loop)와 동시성(Concurrency)
• 2-1) 브라우저 환경
• 2-2) 이벤트 예제
• 3. 이벤트의 종류(자주 사용되는 이벤트)

더 다양한 이벤트를 알고 싶다면 아래의 MDN사이트를 참고한다.

https://developer.mozilla.org/en-US/docs/Web/Events

 

<이벤트>

1. 이벤트

• 이벤트(event)는 DOM 요소와 관련된 어떤 사건을 의미한다.
• 이벤트가 발생하면 누군가 이를 감지할 수 있어야 하며 그에 대응하는 처리를 호출해 주어야 한다.
• 브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시에는 통지해 준다. 이 과정을 통해 사용자와 웹페이지는 상호작용(Interaction)이 가능하게 된다.
• 이벤트 핸들러 : 이벤트가 발생하면 그에 맞는 반응을 하기 위해 이벤트는 이벤트 핸들러라는 함수에 연결된다. 이벤트 핸들러는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행된다. 

 

 

2. 이벤트 루프(Event Loop)와 동시성(Concurrency)

• 브라우저는 단일 쓰레드(single-thread)에서 이벤트 드리븐(event-driven) 방식으로 동작한다.
• 단일 쓰레드는 하나의 작업(task)만을 처리할 수 있지만, 실제로 동작하는 웹 애플리케이션은 많은 task가 동시에 처리되는 것처럼 느껴진다. 이처럼 자바스크립트의 동시성(Concurrency)을 지원하는 것이 바로 이벤트 루프(Event Loop)이다.

 

2-1) 브라우저 환경

• 대부분의 자바스크립트 엔진은 크게 Call Stack과 Heap영역으로 나뉜다.
• Call Stack(호출 스택) : 작업이 요청되면(함수가 호출되면) 요청된 작업은 순차적으로 Call Stack에 쌓이게 되고 순차적으로 실행된다. 자바스크립트는 단 하나의 Call Stack을 사용하기 때문에 해당 task가 종료하기 전까지는 다른 어떤 task도 수행될 수 없다.
• Heap : 동적으로 생성된 객체 인스턴스가 할당되는 영역이다.
• 이와 같이 자바스크립트 엔진은 단순히 작업이 요청되면 Call Stack을 사용하여 요청된 작업을 순차적으로 실행할 뿐이다. 앞에서 언급한 동시성(Concurrency)을 지원하기 위해 필요한 비동기 요청(이벤트를 포함) 처리는 자바스크립트 엔진을 구동하는 환경 즉 브라우저(또는 Node.js)가 담당한다.
• Event Queue(Task Queue) : 비동기 처리 함수의 콜백 함수, 비동기식 이벤트 핸들러, Timer 함수(setTimeout(), setInterval())의 콜백 함수가 보관되는 영역으로 이벤트 루프(Event Loop)에 의해 특정 시점(Call Stack이 비어졌을 때)에 순차적으로 Call Stack으로 이동되어 실행된다.
• Event Loop(이벤트 루프) : Call Stack 내에서 현재 실행중인 task가 있는지 그리고 Event Queue에 task가 있는지 반복하여 확인한다. 만약 Call Stack이 비어있다면 Event Queue 내의 task가 Call Stack으로 이동하고 실행된다.

 

2-2) 이벤트 예제

function func1() {
  console.log('func1');
  func2();
}

function func2() {
  setTimeout(function () {
    console.log('func2');
  }, 0);

  func3();
}

function func3() {
  console.log('func3');
}

func1();

위 코드 실행 순서

1. 함수 func1이 호출되면 함수 func1은 Call Stack에 쌓인다.
2. 함수 func1은 함수 func2을 호출하므로 함수 func2가 Call Stack에 쌓이고 setTimeout가 호출된다. 
3. setTimeout의 콜백함수는 즉시 실행되지 않고 지정 대기 시간만큼 기다리다가 “tick” 이벤트가 발생하면 태스크 큐로 이동한 후 Call Stack이 비어졌을 때 Call Stack으로 이동되어 실행된다.

 

 

3. 이벤트의 종류

자주 사용되는 이벤트

EVENT	EVENT 내용
OnLoad	현재의 페이지가 로딩되었을 경우
OnUnload	현재의 페이지에서 다른 페이지로 이동할 경우
OnError	현재의 페이지를 읽는 중에 JavaScript Error가 발생할 경우
OnAbort	이미지를 읽는 도중 중지하였을 경우
OnMouseOver	마우스 커서를 개체 위에 두었을 경우
OnMouseOut	마우스 커서를 개체 위에 두었다가 밖으로 이동했을 경우
OnClick	링크 부분이나 버튼을 클릭했을 경우
OnDbclick	링크 부분이나 버튼을 더블클릭했을 경우
OnMouseDown	링크 부분이나 버튼을 클릭했을 경우(OnClick과 동일)
OnMouseUp	마우스 버튼을 클릭했다가 떼었을 경우
OnKeyDown	키보드를 눌렀을 경우
OnKeyPress	키보드를 누르고 있을 경우
OnKeyUp	키보드를 눌렀다 떼었을 경우
OnFocus	폼 양식 입력필드에서 마우스 커서를 위치 하였을 경우
OnBlur	폼 양식 입력필드에서 다른곳으로 마우스 커서를 위치 하였을 경우
OnChange	폼 양식 속의 입력필드가 변경되었을 경우
OnSelect	폼 양식 속의 입력필드 내에 텍스트를 선택하였을 경우
Onsubmit	폼 양식을 전송할 경우
OnReset	폼 양식을 재설정 했을 경우
OnHelp	Help Key를 눌렀을 경우
OnReadyStateChange	페이지가 로드될 경우
OnAfterUpdate	폼 양식속의 입력 필드가 변경 되었을 경우
OnBeforeUpdate	폼 양식 속의 항목이 변경된 경우
OnScroll	스크롤 막대를 스크롤할 경우