.
-
-We can make a `slider` element to represent the strip and the "runner" (`thumb`) inside it:
+막대를 나타내는 `slider` 요소와 그 안의 '러너'(`thumb`)를 만들 수 있습니다.
```html
@@ -253,120 +186,97 @@ We can make a `slider` element to represent the strip and the "runner" (`thumb`)
```
-With styles, it looks like this:
+스타일을 적용하면 다음과 같습니다.
[iframe src="slider-html" height=40 edit]
-And here's the working logic, as it was described, after replacing mouse events with similar pointer events:
+마우스 이벤트를 유사한 포인터 이벤트로 바꾼 뒤의 동작 로직은 다음과 같습니다.
-1. The user presses on the slider `thumb` -- `pointerdown` triggers.
-2. Then they move the pointer -- `pointermove` triggers, and our code moves the `thumb` element along.
- - ...As the pointer moves, it may leave the slider `thumb` element, go above or below it. The `thumb` should move strictly horizontally, remaining aligned with the pointer.
+1. 사용자가 슬라이더 `thumb`를 누르면 `pointerdown`이 발생합니다.
+2. 그런 다음 포인터를 움직이면 `pointermove`가 발생하고, 코드가 `thumb` 요소를 함께 움직입니다.
+ - ...포인터가 움직이다 보면 슬라이더 `thumb` 요소를 벗어나 위아래로 이동할 수 있습니다. 그래도 `thumb`는 포인터에 맞춰 정확히 수평 방향으로만 이동해야 합니다.
-In the mouse event based solution, to track all pointer movements, including when it goes above/below the `thumb`, we had to assign `mousemove` event handler on the whole `document`.
+마우스 이벤트 기반 해결책에서는 포인터가 `thumb` 위아래로 이동하는 경우까지 포함해 모든 포인터 움직임을 추적하려고 전체 `document`에 `mousemove` 이벤트 핸들러를 할당해야 했습니다.
-That's not a cleanest solution, though. One of the problems is that when a user moves the pointer around the document, it may trigger event handlers (such as `mouseover`) on some other elements, invoke totally unrelated UI functionality, and we don't want that.
+하지만 그다지 깔끔한 해결책은 아닙니다. 문제 중 하나는 사용자가 문서 여기저기로 포인터를 움직일 때 다른 요소의 이벤트 핸들러, 예를 들어 `mouseover`를 트리거 해 전혀 관련 없는 UI 기능을 실행할 수 있다는 점입니다. 이는 원하지 않는 동작입니다.
-This is the place where `setPointerCapture` comes into play.
+이럴 때 `setPointerCapture`가 등장합니다.
-- We can call `thumb.setPointerCapture(event.pointerId)` in `pointerdown` handler,
-- Then future pointer events until `pointerup/cancel` will be retargeted to `thumb`.
-- When `pointerup` happens (dragging complete), the binding is removed automatically, we don't need to care about it.
+- `pointerdown` 핸들러에서 `thumb.setPointerCapture(event.pointerId)`를 호출합니다.
+- 이후 `pointerup·pointercancel`까지의 포인터 이벤트는 `thumb`로 재지정됩니다.
+- `pointerup`이 발생하면, 즉 드래그가 완료되면 바인딩은 자동으로 해제되므로 신경 쓸 필요가 없습니다.
-So, even if the user moves the pointer around the whole document, events handlers will be called on `thumb`. Nevertheless, coordinate properties of the event objects, such as `clientX/clientY` will still be correct - the capturing only affects `target/currentTarget`.
->>>>>>> upstream/master
+따라서 사용자가 문서 전체에서 포인터를 움직이더라도 이벤트 핸들러는 `thumb`에서 호출됩니다. 그럼에도 `clientX·clientY` 같은 이벤트 객체의 좌표 프로퍼티는 여전히 올바릅니다. 캡처링은 `target·currentTarget`에만 영향을 줍니다.
-Here's the essential code:
+핵심 코드는 다음과 같습니다.
```js
thumb.onpointerdown = function(event) {
- // retarget all pointer events (until pointerup) to thumb
+ // 모든 포인터 이벤트(pointerup까지)를 thumb으로 재지정합니다.
thumb.setPointerCapture(event.pointerId);
- // start tracking pointer moves
+ // 포인터 이동 추적을 시작합니다.
thumb.onpointermove = function(event) {
- // moving the slider: listen on the thumb, as all pointer events are retargeted to it
+ // 슬라이더 이동: 모든 포인터 이벤트가 thumb으로 재지정되므로 thumb에서 처리합니다.
let newLeft = event.clientX - slider.getBoundingClientRect().left;
thumb.style.left = newLeft + 'px';
};
- // on pointer up finish tracking pointer moves
+ // pointerup에서 포인터 이동 추적을 끝냅니다.
thumb.onpointerup = function(event) {
thumb.onpointermove = null;
thumb.onpointerup = null;
- // ...also process the "drag end" if needed
+ // ...필요하다면 "드래그 종료"도 처리합니다.
};
};
-<<<<<<< HEAD
-thumb.onpointermove = function(event) {
- // moving the slider: listen on the thumb, as all pointer events are retargeted to it
- let newLeft = event.clientX - slider.getBoundingClientRect().left;
- thumb.style.left = newLeft + 'px';
-};
-
-// note: no need to call thumb.releasePointerCapture,
-=======
-// note: no need to call thumb.releasePointerCapture,
->>>>>>> upstream/master
-// it happens on pointerup automatically
+// thumb.releasePointerCapture를 호출할 필요는 없습니다.
+// pointerup에서 자동으로 처리됩니다.
```
```online
-The full demo:
+전체 데모입니다.
[iframe src="slider" height=100 edit]
-In the demo, there's also an additional element with `onmouseover` handler showing the current date.
+데모에는 현재 날짜를 보여주는 `onmouseover` 핸들러가 있는 추가 요소도 있습니다.
-Please note: while you're dragging the thumb, you may hover over this element, and its handler *does not* trigger.
+thumb을 드래그하는 동안 이 요소 위로 마우스를 올려도 핸들러가 *실행되지 않는다*는 점에 주목하세요.
-So the dragging is now free of side effects, thanks to `setPointerCapture`.
+`setPointerCapture` 덕분에 이제 드래그에 부작용이 없습니다.
```
-<<<<<<< HEAD
-At the end, pointer capturing gives us two benefits:
-1. The code becomes cleaner as we don't need to add/remove handlers on the whole `document` any more. The binding is released automatically.
-2. If there are any `pointermove` handlers in the document, they won't be accidentally triggered by the pointer while the user is dragging the slider.
-
-### Pointer capturing events
-=======
->>>>>>> upstream/master
-At the end, pointer capturing gives us two benefits:
-1. The code becomes cleaner as we don't need to add/remove handlers on the whole `document` any more. The binding is released automatically.
-2. If there are other pointer event handlers in the document, they won't be accidentally triggered by the pointer while the user is dragging the slider.
+결국 포인터 캡처링은 두 가지 이점을 줍니다.
+1. 전체 `document`에 핸들러를 추가하거나 제거할 필요가 없어 코드가 더 깔끔해집니다. 바인딩은 자동으로 해제됩니다.
+2. 문서에 다른 포인터 이벤트 핸들러가 있어도 사용자가 슬라이더를 드래그하는 동안 포인터 때문에 실수로 트리거 되지 않습니다.
-### Pointer capturing events
+### 포인터 캡처링 이벤트
-There's one more thing to mention here, for the sake of completeness.
+완전성을 위해 한 가지 더 언급하겠습니다.
-There are two events associated with pointer capturing:
+포인터 캡처링과 관련된 이벤트는 두 가지입니다.
-- `gotpointercapture` fires when an element uses `setPointerCapture` to enable capturing.
-- `lostpointercapture` fires when the capture is released: either explicitly with `releasePointerCapture` call, or automatically on `pointerup`/`pointercancel`.
+- `gotpointercapture`는 요소가 `setPointerCapture`를 사용해 캡처링을 활성화할 때 발생합니다.
+- `lostpointercapture`는 캡처가 해제될 때 발생합니다. 해제는 releasePointerCapture를 직접 호출해서 이루어질 수도 있고, `pointerup`·`pointercancel` 시 자동으로 이루어질 수도 있습니다.
-## Summary
+## 요약
-Pointer events allow handling mouse, touch and pen events simultaneously, with a single piece of code.
+포인터 이벤트를 사용하면 하나의 코드로 마우스, 터치, 펜 이벤트를 동시에 처리할 수 있습니다.
-Pointer events extend mouse events. We can replace `mouse` with `pointer` in event names and expect our code to continue working for mouse, with better support for other device types.
+포인터 이벤트는 마우스 이벤트를 확장합니다. 이벤트 이름에서 `mouse`를 `pointer`로 바꾸어도 마우스에서 계속 동작하며, 다른 기기 유형에 대한 지원도 향상됩니다.
-<<<<<<< HEAD
-For drag'n'drops and complex touch interactions that the browser may decide to hijack and handle on its own - remember to cancel the default action on events and set `touch-events: none` in CSS for elements that we engage.
-=======
-For drag'n'drops and complex touch interactions that the browser may decide to hijack and handle on its own - remember to cancel the default action on events and set `touch-action: none` in CSS for elements that we engage.
->>>>>>> upstream/master
+브라우저가 가로채서 직접 처리할 수 있는 드래그 앤 드롭과 복잡한 터치 상호작용에서는, 이벤트의 기본 동작을 취소하고 관련 요소에 CSS로 `touch-action: none`을 설정해야 한다는 점을 잊지 마세요.
-Additional abilities of pointer events are:
+포인터 이벤트의 추가 기능은 다음과 같습니다.
-- Multi-touch support using `pointerId` and `isPrimary`.
-- Device-specific properties, such as `pressure`, `width/height`, and others.
-- Pointer capturing: we can retarget all pointer events to a specific element until `pointerup`/`pointercancel`.
+- `pointerId`와 `isPrimary`를 사용한 멀티 터치 지원
+- `pressure`, `width·height` 등 기기별 프로퍼티
+- 포인터 캡처링: `pointerup`·`pointercancel`까지 모든 포인터 이벤트를 특정 요소로 재지정할 수 있습니다.
-As of now, pointer events are supported in all major browsers, so we can safely switch to them, especially if IE10- and Safari 12- are not needed. And even with those browsers, there are polyfills that enable the support of pointer events.
+현재 포인터 이벤트는 모든 주요 브라우저에서 지원되므로, 특히 IE10 이하와 Safari 12 이하를 지원할 필요가 없다면 안전하게 전환할 수 있습니다. 해당 브라우저에서도 포인터 이벤트 지원을 가능하게 해주는 폴리필이 있습니다.
\ No newline at end of file
diff --git a/2-ui/3-event-details/7-keyboard-events/article.md b/2-ui/3-event-details/7-keyboard-events/article.md
index 12fe632016..b9d4b6d205 100644
--- a/2-ui/3-event-details/7-keyboard-events/article.md
+++ b/2-ui/3-event-details/7-keyboard-events/article.md
@@ -197,4 +197,4 @@ Main keyboard event properties:
In the past, keyboard events were sometimes used to track user input in form fields. That's not reliable, because the input can come from various sources. We have `input` and `change` events to handle any input (covered later in the chapter ). They trigger after any kind of input, including copy-pasting or speech recognition.
-We should use keyboard events when we really want keyboard. For example, to react on hotkeys or special keys.
+We should use keyboard events when we really want keyboard. For example, to react on hotkeys or special keys.
\ No newline at end of file
diff --git a/2-ui/3-event-details/8-onscroll/article.md b/2-ui/3-event-details/8-onscroll/article.md
index 734bd84c61..520c2e6148 100644
--- a/2-ui/3-event-details/8-onscroll/article.md
+++ b/2-ui/3-event-details/8-onscroll/article.md
@@ -34,4 +34,4 @@ If we add an event handler to these events and `event.preventDefault()` in it, t
There are many ways to initiate a scroll, so it's more reliable to use CSS, `overflow` property.
-Here are few tasks that you can solve or look through to see applications of `onscroll`.
+Here are few tasks that you can solve or look through to see applications of `onscroll`.
\ No newline at end of file
diff --git a/2-ui/5-loading/03-onload-onerror/article.md b/2-ui/5-loading/03-onload-onerror/article.md
index 590e54ab40..dc5cd20fa4 100644
--- a/2-ui/5-loading/03-onload-onerror/article.md
+++ b/2-ui/5-loading/03-onload-onerror/article.md
@@ -203,4 +203,4 @@ Images `![]()
`, external styles, scripts and other resources provide `load` and
The only exception is `