recursal/MDN huggingface dataset:
History.forward()
=================

**`History.forward()`** 메서드는 브라우저가 세션 기록의 바로 앞 페이지로 이동하도록 지시합니다. `history.go(1)`과 같습니다. 다음 페이지가 없는 경우 아무것도 하지 않습니다.

이 메서드는 비동기적입니다. `popstate` 이벤트 처리기를 통해 탐색 완료 시점을 알 수 있습니다.

구문
--


```js
history.forward();
```

예제
--

다음 예제는 클릭했을 때 앞으로 가는 버튼을 생성합니다.

### HTML


```html
<button id="go-forward">앞으로 가기!</button>
```

### JavaScript


```js
document.getElementById("go-forward").addEventListener("click", (e) => {
  window.history.forward();
});
```

명세
--

| Specification |
| --- |
| HTML Standard # dom-history-forward-dev |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `History`
캔버스 튜토리얼
========

![](/ko/docs/Web/API/Canvas_API/Tutorial/canvas_tut_examples.jpg)
**`<canvas>`**는 HTML 요소 중 하나로서, 스크립트(보통은 JavaScript)를 사용하여 그림을 그리는 데에 사용됩니다. 예를 들면, 그래프를 그리거나 사진을 합성하거나, 간단한(혹은 복잡할 수도 있는) 애니메이션을 만드는 데에 사용될 수 있습니다. 오른쪽에 보이는 이미지들은 앞으로 설명하게 될 **`<canvas>`**를 사용하여 만들 수 있는 것들의 일부입니다.

이 튜토리얼은 `<canvas>` 요소를 사용하여 2D 그래픽을 어떻게 그리는지 기초부터 설명합니다. 예제들을 통하여 캔버스로 할 수 있는 것이 무엇인지 알려주며, 바로 사용할 수 있도록 코드도 제공합니다.

`<canvas>`는 Apple의 Webkit에 처음 도입되어 Mac OS X 대시보드(Dashboard)에 사용되었고, 이후 다른 브라우저에도 구현되어 왔습니다. 현재 대부분의 주요 브라우저에서 지원됩니다.

시작하기 전 알아두어야 할 것
----------------

`<canvas>` 요소를 사용하는 것이 어려운 일은 아니지만, HTML과 JavaScript에 대한 기본 지식을 갖추고 있어야 합니다. 몇몇 오래된 브라우저는 `<canvas>` 요소를 지원하지 않지만, 최근 버전의 주요 브라우저들은 모두 지원하고 있습니다. 캔버스의 크기는 300px \* 150px (너비 \* 높이)가 초기 설정값이며, HTML `height`와 `width` 속성을 사용하여 바꿀 수 있습니다. 캔버스에 그림을 그리려면 JavaScript 컨텍스트 오브젝트를 사용하며, 즉석에서 그림을 생성할 수 있습니다.

튜토리얼 내용
-------

* 캔버스(Canvas) 기본 사용법
* 캔버스에 도형 그리기
* 스타일과 색 적용하기
* 텍스트 그리기
* 이미지 사용하기 (en-US)
* 모양 변환
* 도형 합성
* 애니메이션 기본
* 애니메이션 고급
* 픽셀 다루기 (en-US)
* Hit 영역과 accessibility
* 캔버스 최적화
* 마무리
같이 보기
-----

* 캔버스 주제 페이지
* Adobe 일러스트레이터와 캔버스 플러그인
* HTML5 캔버스 튜토리얼
* 다음 »
Finale
======

* « 이전

축하합니다 Canvas 튜토리얼을 모두 끝마쳤습니다! 이 정보는 웹에서 더 나은 2D 그래픽을 만드는데 도움이 됩니다.

더 많은 예시와 튜토리얼
-------------

이 사이트에는 다양한 데모와 canvas에 대한 추가 설명이 있다.

Codepen.io

프론트 엔드 개발자 playground 및 브라우저의 코드 편집기.

HTML5 Canvas Tutorials

대부분 canvas API의 예시

Game development

게임은 가장 인기있는 컴퓨터 활동 중 하나이다. 어떤 표준 규격의 웹 브라우저에서도 실행할 수 있는 더 나은 게임을 개발할 수 있도록 하기 위한 신기술이 끊임없이 등장하고 있다.

기타 웹API
-------

이 API들는 canvas 및 그래픽으로 작업할 때 유용하다.

WebGL

3D를 포함한 복잡한 그래픽 렌더링을 위한 고급 API.

SVG

확장 가능한 Vector Graphics는 이미지를 벡터(선)과 형태의 집합으로 묘사하여 이미지를 그리는 크기에 상관없이 원활하게 확장할 수 있다.

Web Audio

Web Audio API는 개발자들이 오디오 소스 선택, 오디오에 효과 추가, 오디오 시각화 생성, 공간 효과 적용(예: 패닝)등을 할 수 있도록 웹 상에서 오디오를 제어하기 위한 다양하고 좋은 시스템을 제공한다.

문의사항
----

Stack Overflow

"canvas"가 태그된 문의사항.

Comments about this tutorial – the MDN documentation community

이 튜토리얼에 대해 의견이 있으시거나 저희에게 감사를 표하고 싶다면 언제든지 연락해주세요!

* « 이전
도형 합성
=====

이전 페이지들에서 나온 모든 예제에서, 새로 그리는 도형은 언제나 이미 그려진 도형의 위에 그려졌습니다. 대부분의 상황에서는 이렇게 하는 것이 적절하지만, 도형을 합성하기 위한 순서를 제한하게 되는데, `globalCompositeOperation` 속성을 설정함으로써 이러한 상태를 바꿀 수 있습니다.

`globalCompositeOperation`
--------------------------

기존 도형 뒤에 새로운 도형을 그릴 수 있을 뿐만 아니라, 도형의 일정 영역을 가려 보이지 않게 하거나 캔버스의 특정 부분을 지우는 (`clearRect()` 메소드는 사각형의 영역만을 지우지만, 이같은 제한도 없다.) 등의 효과를 얻을 수도 있습니다.

`globalCompositeOperation = type`

새로운 도형을 그릴 때, 도형 합성 방법을 설정합니다. type은 다음 26종류의 합성 방법 중에서 선택할 수 있습니다.

다음 예제의 코드를 확인하려면 도형 합성 예제를 확인해 주세요.

잘라내기 경로(Clipping path)
----------------------

![](/ko/docs/Web/API/Canvas_API/Tutorial/Compositing/canvas_clipping_path.png) 잘라내기 경로는 다른 캔버스 도형과 비슷하지만, 다른 도형에서 원하지 않는 부분을 가리는 가면과 같은 역할을 합니다. 오른쪽에 있는 그림을 보면 어떤 역할을 하는지 알 수 있을 것입니다. 붉은 별 모양이 잘라내기 경로입니다. 이 경로 밖에 있는 모든 것은 캔버스에 그려지지 않을 것입니다.

잘라내기 경로와 위에서 살펴본 `globalCompositeOperation` 속성을 비교해 보면, `source-in`과 `source-atop`에서 비슷한 효과가 보입니다. 이들과 잘라내기 경로와의 가장 중요한 차이점은, 잘라내기 경로 자체는 캔버스에 전혀 그려지지 않는다는 것입니다. 잘라내기 경로는 제한된 영역 안에서 여러 가지 도형을 그리는 데에 적합합니다.

캔버스에 도형 그리기 (en-US)에서는 `stroke()`과 `fill()` 메소드만을 설명했었는데, `clip()`이라는 세 번째 메소드도 있습니다.

`clip()`

현재 그려지는 경로를 현재 잘라내기 경로로 만듭니다.

경로를 닫기 위해 `closePath()` 대신 `clip()`을 사용하고, 경로를 채우거나 윤곽선을 만드는 대신 잘라내기 경로로 만들 수 있습니다.

`<canvas>` 요소의 초기 설정값으로써, 캔버스는 캔버스와 똑같은 크기의 잘라내기 경로를 가집니다. 크기가 똑같기 때문에 잘라내기 효과는 나타나지 않습니다.

### `clip` 예제

다음 예제에서는 특정 영역의 별들만 보이도록 동그란 모양의 잘라내기 경로를 사용할 것입니다.


```js
function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  ctx.fillRect(0, 0, 150, 150);
  ctx.translate(75, 75);

  // 동그란 모양의 잘라내기 경로를 생성한다
  ctx.beginPath();
  ctx.arc(0, 0, 60, 0, Math.PI \* 2, true);
  ctx.clip();

  // 배경을 그린다
  var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
  lingrad.addColorStop(0, "#232256");
  lingrad.addColorStop(1, "#143778");

  ctx.fillStyle = lingrad;
  ctx.fillRect(-75, -75, 150, 150);

  // 별을 그린다
  for (var j = 1; j < 50; j++) {
    ctx.save();
    ctx.fillStyle = "#fff";
    ctx.translate(
      75 - Math.floor(Math.random() \* 150),
      75 - Math.floor(Math.random() \* 150),
    );
    drawStar(ctx, Math.floor(Math.random() \* 4) + 2);
    ctx.restore();
  }
}

function drawStar(ctx, r) {
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(r, 0);
  for (var i = 0; i < 9; i++) {
    ctx.rotate(Math.PI / 5);
    if (i % 2 == 0) {
      ctx.lineTo((r / 0.525731) \* 0.200811, 0);
    } else {
      ctx.lineTo(r, 0);
    }
  }
  ctx.closePath();
  ctx.fill();
  ctx.restore();
}
```


```
<canvas id="canvas" width="150" height="150"></canvas>
```


```
draw();
```


코드의 위쪽 몇 줄에서는 배경으로 캔버스 크기와 같은 검은색 네모를 그리고, 가운데로 원점을 옮깁니다. 그런 다음 호를 그리고 `clip()`을 사용하여 동그란 모양의 잘라내기 경로를 생성합니다. 캔버스 상태를 저장할 때 잘라내기 경로도 같이 저장됩니다. 이전의 잘라내기 경로를 보존하려면, 새로운 잘라내기 경로를 만들기 전에 캔버스 상태를 저장하면 됩니다.

잘라내기 경로를 만든 후에 그려지는 모든 것들은, 그 경로의 안쪽에서만 보입니다. 이는 그 다음에 그려지는 선형 그라디언트에서 확실히 볼 수 있습니다. 이렇게 하고 나서, `drawStar()` 함수를 사용하여 위치와 크기가 모두 다른 50개의 별을 그립니다. 이 별들은 잘라내기 경로 안쪽에만 나타납니다.

| Screenshot | Live sample |
| --- | --- |
|  |  |

* « 이전
* 다음 »
table.width
===========

### 요약

**width**는 바라는 테이블의 너비를 지정합니다.

### 구문


```js
HTMLTableElement.width = width;
var width = HTMLTableElement.width;
```


`width`가 픽셀수나 퍼센트 값으로 너비를 나타내는 문자열인 곳.

### 예제


```js
mytable.width = "75%";
```

명세서
---

| Specification |
| --- |
| HTML Standard # dom-table-width |
BroadcastChannel.postMessage()
==============================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`BroadcastChannel.postMessage()`** 는 모든 종류의 `Object`가 될 수 있는 메세지를 동일한 출처를 가진 모든 브라우징 맥락의 각 수신기에 보냅니다. 메세지는 채널에 바인딩된 각 `BroadcastChannel`을 대상으로 하는 'message' 이벤트로 전송됩니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

구문
--


```js
channel.postMessage(message)
```

### 매개변수

`message`

다른 창으로 전송될 데이터입니다. 데이터는 structured clone 알고리즘을 통해 직렬화됩니다. 즉, 다양한 데이터 객체를 직접 직렬화하지 않고도 안전하게 전송할 수 있습니다.

### 반환 값

없음.

### 예외

`InvalidStateError` `DOMException` (en-US)

`BroadcastChannel`이 이미 닫힌 경우 발생합니다.

`DataCloneError` `DOMException` (en-US)

데이터를 직렬화할 수 없는 경우 발생합니다.

명세서
---

| Specification |
| --- |
| HTML Standard # dom-broadcastchannel-postmessage-dev |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `BroadcastChannel.postMessage()`가 속한 인터페이스, `BroadcastChannel`.
BroadcastChannel()
==================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`BroadcastChannel()`** 생성자는 새 `BroadcastChannel`을 생성하고 이를 채널에 연결합니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

구문
--


```js
new BroadcastChannel(channelName)
```

### 매개변수

`channelName`

채널의 이름을 나타내는 문자열로, 출처가 동일한 모든 브라우징 맥락들에 대해 이 이름을 가진 채널이 단 하나만 존재합니다.

예제
--


```js
// "internal\_notification" 채널을 수신하는 새 채널을 만듭니다.

const bc = new BroadcastChannel("internal\_notification");
bc.postMessage("New listening connected!");
```

명세서
---

| Specification |
| --- |
| HTML Standard # dom-broadcastchannel-dev |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `BroadcastChannel`, the interface it belongs to.
BroadcastChannel: messageerror event
====================================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
`messageerror` 이벤트는 역직렬화할 수 없는 메시지가 채널에 도착할 시, `BroadcastChannel` 객체에서 발생합니다.

구문
--

`addEventListener()` 같은 메서드에서 이벤트 이름을 사용하거나, 이벤트 처리기 속성을 설정하세요.


```js
addEventListener("messageerror", (event) => { })
onmessageerror = (event) => { }
```

이벤트 타입
------

`MessageEvent`. `Event`를 상속합니다.

Event

MessageEvent이벤트 속성
------

아래 나열된 속성 외에도, 부모 인터페이스인 `Event`의 속성들을 사용할 수 있습니다.

`data` (en-US) 읽기 전용

메시지 발신기가 보낸 데이터.

`origin` (en-US) 읽기 전용

메시지 발신기의 출처를 나타내는 문자열.

`lastEventId` (en-US) 읽기 전용

이벤트의 고유 ID를 나타내는 문자열.

`source` (en-US) 읽기 전용

WindowProxy, `MessagePort` (en-US), 또는 `ServiceWorker` 객체 등 메시지 발신자를 나타내는 메시지 이벤트 소스.

`ports` (en-US) 읽기 전용

메시지가 전송되는 채널과 연결된 포트를 나타내는 `MessagePort` (en-US) 객체의 배열(예: 채널 내 메시징, 공유된 맥락에 메시지를 보낼 때 등).

예제
--

이 코드는 메시지와 에러를 수신하기 위해 `addEventListener`를 사용합니다.


```js
const channel = new BroadcastChannel("example-channel");

channel.addEventListener("message", (event) => {
  received.textContent = event.data;
});

channel.addEventListener("messageerror", (event) => {
  console.error(event);
});
```


위와 동일하지만, `onmessage` 와 `onmessageerror` 이벤트 핸들러 속성을 사용합니다.


```js
const channel = new BroadcastChannel("example-channel");

channel.onmessage = (event) => {
  received.textContent = event.data;
};

channel.onmessageerror = (event) => {
  console.log(event);
};
```

명세서
---

| Specification |
| --- |
| HTML Standard # event-messageerror |
| HTML Standard # handler-broadcastchannel-onmessageerror |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 연관된 이벤트: `message`
BroadcastChannel.name
=====================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`BroadcastChannel.name`** 읽기 전용 속성은 지정된 채널의 이름을 고유하게 식별하는 문자열을 반환합니다. 이 이름은 생성 시 `BroadcastChannel()` 생성자에 전달되므로 읽기 전용입니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

값
-

문자열.

예제
--


```js
// 채널에 연결
const bc = new BroadcastChannel("test\_channel");

// postMessage 등의 동작들...

// 채널 이름을 콘솔에 로깅
console.log(bc.name); // "test\_channel"

// 완료되면 채널 연결 해제
bc.close();
```

명세서
---

| Specification |
| --- |
| HTML Standard # dom-broadcastchannel-name-dev |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `BroadcastChannel.name`이 속한 인터페이스, `BroadcastChannel`.
BroadcastChannel.close()
========================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`BroadcastChannel.close()`** 는 채널에 대한 연결을 종료하여, 객체가 가비지 컬렉션으로 처리되도록 합니다. 브라우저 입장에서 채널이 더 이상 필요하지 않다는 것을 알 수 있는 다른 방법이 없기 때문에, 이 단계는 반드시 수행해야 하는 단계입니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

구문
--


```js
channel.close()
```

예제
--


```js
// 채널에 연결
const bc = new BroadcastChannel("test\_channel");

// postMessage 등의 동작들...

// 완료되면 채널 연결 해제
bc.close();
```

명세서
---

| Specification |
| --- |
| HTML Standard # dom-broadcastchannel-close-dev |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `BroadcastChannel.close()`가 속한 인터페이스, `BroadcastChannel`.
Event.cancelable
================

`Event` 인터페이스의 **`cancelable`** 읽기 전용 속성은 이벤트의 취소가 가능한지를 나타냅니다.

이벤트가 취소 불가능한 경우, 해당 이벤트의 `cancelable` 속성은 `false`이며 수신기에서 이벤트의 발생을 멈출 수 없습니다.

취소 가능한 브라우저 내장 이벤트는 대부분 사용자가 페이지와 상호작용해서 발생하는 이벤트입니다. 예컨대 `click`, `wheel` (en-US), `beforeunload` 이벤트를 취소하게 되면, 각각 사용자가 어떤 요소를 클릭하는 것, 페이지를 스크롤하는 것, 페이지에서 나가는 것을 막게 됩니다.

사용자 JavaScript 코드에서 생성하는 합성 이벤트의 경우, 이벤트를 초기화할 때 취소 가능 여부를 지정할 수 있습니다.

이벤트를 취소하려면 이벤트의 `preventDefault()` 메서드를 호출하세요. 해당 이벤트에 대한 기본 동작을 실행하지 않게 됩니다.

다양한 종류의 이벤트를 처리해야 하는 처리기의 경우 `preventDefault()`를 호출하기 전에 먼저 `cancelable` 속성의 값을 검사해야 할 수 있습니다.

값
-

이벤트를 취소할 수 있으면 `true`.

예제
--

브라우저 제공자들은 `wheel` (en-US) 이벤트를 최초 수신 시점에만 취소할 수 있도록 제안하고 있습니다. 즉, 두 번째 `wheel` 이벤트부터는 취소할 수 없습니다.


```js
function preventScrollWheel(event) {
  if (typeof event.cancelable !== "boolean" || event.cancelable) {
    // 이벤트를 취소할 수 있으므로 취소함
    event.preventDefault();
  } else {
    // 이벤트를 취소할 수 없음
    // preventDefault() 호출이 안전하지 않음
    console.warn(`The following event couldn't be canceled:`);
    console.dir(event);
  }
}

document.addEventListener("wheel", preventScrollWheel);
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-cancelable② |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event.type
==========

`Event` 인터페이스의 **`type`** 읽기 전용 속성은 이벤트의 유형을 나타내는 문자열을 반환합니다. 이 속성은 이벤트를 생성할 때 설정되며, `click`, `load`, `error`처럼 특정 이벤트를 지칭할 때 사용하는 이름과 같은 값을 반환합니다.

값
-

`Event`의 유형을 나타내는 {{jdxref("String")}}입니다.

예제
--

이 예제에서는 키보드를 누르거나 마우스를 클릭할 때마다 발생한 이벤트의 유형을 기록합니다.

### HTML


```html
<p>아무 키나 누르거나 마우스를 클릭해서 이벤트 유형을 알아보세요.</p>
<p id="log"></p>
```

### JavaScript


```js
function getEventType(event) {
  const log = document.getElementById("log");
  log.innerText = event.type + "\n" + log.innerText;
}

// 키보드 이벤트
document.addEventListener("keydown", getEventType, false); // 1번
document.addEventListener("keypress", getEventType, false); // 2번
document.addEventListener("keyup", getEventType, false); // 3번

// 마우스 이벤트
document.addEventListener("mousedown", getEventType, false); // 1번
document.addEventListener("mouseup", getEventType, false); // 2번
document.addEventListener("click", getEventType, false); // 3번
```

### 결과

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-type④ |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `EventTarget.addEventListener()`
* `EventTarget.removeEventListener()`
Event.isTrusted
===============

`Event` 인터페이스의 **`isTrusted`** 읽기 전용 속성은 사용자 액션에 의해 생성된 이벤트에서는 `true`, 스크립트에서 생성 또는 수정했거나 `EventTarget.dispatchEvent()`로 발송한 이벤트의 경우 `false`인 불리언 값입니다.

예제
--


```js
if (e.isTrusted) {
  // 신뢰할 수 있는 이벤트
} else {
  // 신뢰 불가능한 이벤트
}
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-istrusted① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event.defaultPrevented
======================

`Event` 인터페이스의 **`defaultPrevented`** 읽기 전용 속성은 `Event.preventDefault()`로 이 이벤트를 취소했는지 나타내는 불리언 값을 반환합니다.

값
-

`true`면 사용자 에이전트의 기본 동작을 취소했고, `false`면 취소하지 않았음을 나타내는 불리언 값입니다.

예제
--

이 예제는 두 개의 `<a>` 요소를 사용한 링크 방문 시도를 기록합니다. 두 번째 링크는 JavaScript를 사용해 동작을 막아놨습니다.

### HTML


```html
<p><a id="link1" href="#link1">첫 번째 링크 방문</a></p>
<p><a id="link2" href="#link2">두 번째 링크 방문 시도</a> (사용 불가)</p>
<p id="log"></p>
```

### JavaScript


```js
function stopLink(event) {
  event.preventDefault();
}

function logClick(event) {
  const log = document.getElementById("log");

  if (event.target.tagName === "A") {
    if (event.defaultPrevented) {
      log.innerText =
        "죄송합니다. 이 링크는 방문할 수 없습니다.\n" + log.innerText;
    } else {
      log.innerText = "링크 방문 중...\n" + log.innerText;
    }
  }
}

const a = document.getElementById("link2");
a.addEventListener("click", stopLink);
document.addEventListener("click", logClick);
```

### 결과

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-defaultprevented① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event.timeStamp
===============

`Event` 인터페이스의 **`timeStamp`** 읽기 전용 속성은 이벤트가 생성된 시간을 밀리초 단위로 반환합니다.

값
-

시간 원점으로부터 이벤트가 생성되기까지 경과한 시간을 밀리초 단위로 나타낸 수입니다. 전역 객체가 `Window`라면, 시간 원점은 사용자가 링크를 클릭했던 시점, 혹은 스크립트가 문서의 로딩을 시작했던 시점입니다. 워커에서의 시간 원점은 워커가 생성된 시점입니다.

이 값은 5 마이크로초(0.005ms)까지 정확한 `DOMHighResTimeStamp` (en-US)지만, 핑거프린팅을 방지하기 위해 낮은 정밀도로 제공합니다.

예제
--

### HTML


```html
<p>
  이 프레임에 포커스를 두고 아무 키나 눌러 keypress 이벤트의 현재 타임스탬프를
  알아보세요.
</p>
<p>timeStamp: <span id="time">-</span></p>
```

### JavaScript


```js
function getTime(event) {
  const time = document.getElementById("time");
  time.firstChild.nodeValue = event.timeStamp;
}
document.body.addEventListener("keypress", getTime);
```

### 결과

감소된 시간 정밀도
----------

타이밍 공격과 핑거프린팅을 방지하기 위해, `Event.timeStamp`는 브라우저 설정에 따라 일정 자릿수에서 반올림된 값을 반환할 수 있습니다.

Firefox에서는 `privacy.reduceTimerPrecision` 설정이 기본적으로 활성화된 상태며 값은 2ms입니다.


```js
// Firefox 60에서 감소된 시간 정밀도 (2ms)
event.timeStamp;
// 1519211809934
// 1519211810362
// 1519211811670
// ...

// privacy.resistFingerprinting을 활성화했을 때 감소된 시간 정밀도
event.timeStamp;
// 1519129853500
// 1519129858900
// 1519129864400
// ...
```


Firefox에서 `privacy.resistFingerprinting` 설정도 함께 활성화할 경우, 정밀도는 100ms와 `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`의 값 중 더 큰 쪽이 됩니다.

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-timestamp① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event.stopPropagation()
=======================

`Event` 인터페이스의 **`stopPropagation()`** 메서드는 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지합니다. 전파를 방지해도 이벤트의 기본 동작은 실행되므로, `stopPropagation()`이 링크나 버튼의 클릭을 막는 것은 아닙니다. 이런 기본 동작을 방지하려면 `preventDefault()` 메서드를 사용하세요. 또한, `stopPropagation()`은 같은 이벤트 대상에 부착한 다른 수신기까지 막지는 않습니다. 이것까지 막으려면 `stopImmediatePropagation()`를 사용하세요.

구문
--


```js
event.stopPropagation();
```

예제
--

이벤트 전파를 확인하세요.

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-stoppropagation① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event.stopImmediatePropagation()
================================

`Event` 인터페이스의 **`stopImmediatePropagation()`** 메서드는 같은 이벤트에 대해 나머지 수신기가 발동하지 못하도록 방지합니다.

같은 이벤트 유형에 대한 다수의 수신기를 하나의 요소에 부착한 경우, 각각의 수신기 호출 순서는 부착 순서와 동일합니다. 그 수신기들 중 하나에서 `stopImmediatePropagation()` 메서드를 호출하면 그 이후의 나머지 수신기들은 호출되지 않습니다.

구문
--


```js
event.stopImmediatePropagation();
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-stopimmediatepropagation① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event.preventDefault()
======================

`Event` 인터페이스의 **`preventDefault()`** 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다.

`preventDefault()`를 호출한 이벤트도 수신기 중 하나에서 `stopPropagation()` 또는 `stopImmediatePropagation()`을 호출하기 전까지는 다른 이벤트와 마찬가지로 전파됩니다.

아래에도 적혀있지만, `cancelable: true` 없이 `EventTarget.dispatchEvent()`로 발송한 이벤트처럼 취소 불가능한 이벤트의 경우, `preventDefault()`를 호출해도 아무 효과도 나타나지 않습니다.

구문
--
```

event.preventDefault();
```

예제
--

### 기본 클릭 동작 방지하기

체크박스의 클릭 기본 동작은 체크박스를 체크하거나 체크 해제하는 것입니다. 이 예제는 체크박스의 클릭 기본 동작을 방지하는 모습을 보입니다.

#### JavaScript


```js
document.querySelector("#id-checkbox").addEventListener(
  "click",
  function (event) {
    document.getElementById("output-box").innerHTML +=
      "죄송합니다! <code>preventDefault()</code> 때문에 체크할 수 없어요!<br>";
    event.preventDefault();
  },
  false,
);
```


#### HTML


```html
<p>체크박스를 클릭해주세요.</p>

<form>
  <label for="id-checkbox">체크박스:</label>
  <input type="checkbox" id="id-checkbox" />
</form>

<div id="output-box"></div>
```


#### 결과

### 키 입력이 입력 칸을 채우는 것을 방지하기

이 예제에서는 `preventDefault()`를 사용해서 사용자가 입력 칸에 원하지 않는 문자를 입력하지 못하도록 합니다. 실제로 이런 기능이 필요할 땐 내장 HTML 양식 검증 (en-US)을 사용하세요.

#### HTML


```html
<div class="container">
  <p>이름을 입력하세요. 영문 소문자만 사용할 수 있습니다.</p>

  <form>
    <input type="text" id="my-textbox" />
  </form>
</div>
```


#### CSS

사용자가 잘못된 키를 누를 때 보여줄 경고창을 그리기 위한 CSS입니다.


```css
.warning {
  border: 2px solid #f39389;
  border-radius: 2px;
  padding: 10px;
  position: absolute;
  background-color: #fbd8d4;
  color: #3b3c40;
}
```


#### JavaScript

이제 실제 작업을 수행할 JavaScript 코드입니다. 우선 `keypress` (en-US) 이벤트를 수신합니다.


```js
var myTextbox = document.getElementById("my-textbox");
myTextbox.addEventListener("keypress", checkName, false);
```


`checkName()` 함수는 사용자가 누른 키를 관찰해서 허용할지, 허용하지 않을지 결정합니다.


```js
function checkName(evt) {
  var charCode = evt.charCode;
  if (charCode != 0) {
    if (charCode < 97 || charCode > 122) {
      evt.preventDefault();
      displayWarning(
        "영문 소문자만 입력하세요." + "\n" + "charCode: " + charCode + "\n",
      );
    }
  }
}
```


`displayWarning()` 함수는 경고창을 띄웁니다. 완벽한 모습은 아니지만 예제로는 충분합니다.


```js
var warningTimeout;
var warningBox = document.createElement("div");
warningBox.className = "warning";

function displayWarning(msg) {
  warningBox.innerHTML = msg;

  if (document.body.contains(warningBox)) {
    window.clearTimeout(warningTimeout);
  } else {
    // insert warningBox after myTextbox
    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
  }

  warningTimeout = window.setTimeout(function () {
    warningBox.parentNode.removeChild(warningBox);
    warningTimeout = -1;
  }, 2000);
}
```


#### 결과

참고
--

이벤트 흐름의 어떤 단계에서라도 `preventDefault()`를 호출하면 이벤트를 취소합니다. 즉, 이벤트에 대한 구현체의 기본 동작을 실행하지 않습니다.

`Event.cancelable`을 사용해서 이벤트의 취소 가능 여부를 알아낼 수 있습니다. 취소 불가능한 이벤트에 대해 `preventDefault()`를 호출해도 아무 효과가 없습니다.

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-preventdefault③ |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event.target
============

`Event` 인터페이스의 **`target`** 속성은 이벤트가 발생한 대상 객체를 가리킵니다. 버블링과 캡처링 단계에서는 `Event.currentTarget` (en-US)과 다를 수 있습니다.

### 값

연관된 `EventTarget`.

예제
--

`event.target` 속성을 사용하여 **이벤트 위임**을 구현할 수 있습니다.


```js
// 목록 생성
const ul = document.createElement("ul");
document.body.appendChild(ul);

const li1 = document.createElement("li");
const li2 = document.createElement("li");
ul.appendChild(li1);
ul.appendChild(li2);

function hide(evt) {
  // e.target은 사용자가 클릭한 <li> 요소를 가리킴
  // 여기서 e.currentTarget은 부모인 <ul>을 가리킬 것
  evt.target.style.visibility = "hidden";
}

// 목록에 수신기 부착
// 각각의 <li>를 클릭할 때 호출됨
ul.addEventListener("click", hide, false);
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-target③ |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 이벤트 대상의 비교 (en-US)
Event()
=======

**`Event()`** 생성자는 새로운 `Event` 객체를 생성합니다. 생성자로 생성한 이벤트는 브라우저가 생성하는 이벤트와 구분해서 합성 이벤트(synthetic event)라고 부르며, 스크립트에서 발송할 수 있습니다.

구문
--


```js
new Event(type);
new Event(type, options);
```

### 매개변수

`type`

이벤트의 이름을 나타내는 문자열입니다.

`options` Optional

다음 속성을 포함하는 객체입니다.

`bubbles` Optional

이벤트의 버블링 여부를 나타내는 불리언 값입니다. 기본 값은 `false`입니다.

`cancelable` Optional

이벤트를 취소할 수 있는지 나타내는 불리언 값입니다. 기본 값은 `false`입니다.

`composed` Optional

이벤트가 섀도 루트(shadow root) 바깥의 이벤트 수신기로도 전달될지 나타내는 불리언 값입니다. `Event.composed` (en-US)에서 자세한 정보를 확인하세요. 기본 값은 `false`입니다.


### 반환 값

새로운 `Event` 객체.

예제
--


```js
// 버블링 가능하고 취소 불가능한 look 이벤트 생성

const evt = new Event("look", { bubbles: true, cancelable: false });
document.dispatchEvent(evt);

// document 외의 다른 요소에서도 이벤트 발송 가능
myDiv.dispatchEvent(evt);
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-event |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Event`
* `EventTarget.dispatchEvent()`
* 이벤트 생성 및 발동