포인터 이벤트

다중 포인터(예: 멀티터치) 시나리오에서 isPrimary 속성은 각 포인터 유형의 활성 포인터 집합 중 주 포인터를 식별하는 데 사용된다.

• 어느 시점에서든 각 포인터 유형에는 최대 하나의 주 포인터만 존재할 수 있다.
• 특정 포인터 유형에서 처음 활성화되는 포인터(예: 멀티터치 상호작용에서 화면을 처음 터치하는 손가락)가 해당 포인터 유형의 주 포인터가 된다.
• 주 포인터만 호환성 마우스 이벤트를 생성한다. 여러 주 포인터가 있는 경우 이러한 포인터는 모두 호환성 마우스 이벤트를 생성한다.

e라는 이름의 포인터 이벤트를 발생시킨다는 것은 e라는 이름의 이벤트를 발생시키는 것을 의미하며, 이때 PointerEvent를 사용하고 그 속성은 PointerEvent 인터페이스 및 속성 및 기본 동작에 정의된 대로 설정한다.

이벤트가 gotpointercapture, lostpointercapture, click, auxclick 또는 contextmenu 이벤트가 아닌 경우 이 PointerEvent에 대해 대기 중인 포인터 캡처 처리 단계를 실행한다.

이벤트가 발생하는 대상을 결정하는 방법은 다음과 같다:

• 포인터에 대해 포인터 캡처 대상 재정의가 설정되어 있으면 대상을 포인터 캡처 대상 재정의 객체로 설정한다.
• 그렇지 않으면 대상을 히트 테스트가 반환한 객체로 설정한다.

targetDocument를 대상의 노드 문서로 둔다 [DOM].

이벤트가 pointerdown, pointermove 또는 pointerup인 경우 이벤트의 pointerId에 대한 활성 문서를 targetDocument로 설정한다.

이벤트가 pointerdown이고, 연결된 장치가 직접 조작 장치이며 대상이 Element인 경우, 암시적 포인터 캡처에 설명된 대로 이 pointerId의 포인터 캡처를 설정하여 대상 요소를 가리키게 한다.

이 이벤트를 발생시키기 전에 사용자 에이전트는 이벤트 순서를 보장하기 위해 포인팅 장치가 previousTarget에서 대상으로 이동한 것처럼 대상을 처리하는 것이 좋다. needsOverEvent 플래그가 설정되어 있으면 대상 요소가 동일하더라도 pointerover 이벤트가 필요하다.

결정된 대상에 이벤트를 발생시킨다.

결정된 대상을 주어진 포인터의 previousTarget으로 저장하고, needsOverEvent 플래그를 false로 재설정한다. 어느 시점에서든 previousTarget이 더 이상 연결된 상태가 아니게 되면 [DOM], previousTarget에 이벤트를 디스패치하는 것에 해당하는 이벤트 경로를 따라 가장 가까운 여전히 연결된 [DOM] 부모로 previousTarget을 갱신하고 needsOverEvent 플래그를 true로 설정한다.

화면 표면을 기준으로 이동했거나 속성 중 하나라도 변화한 포인팅 장치는 포인터 이벤트 유형에 정의된 여러 이벤트를 발생시킨다. 정지한 포인팅 장치(화면 표면을 기준으로 이동하지도 않았고 어떤 속성도 변화하지 않은 장치)의 경우 사용자 에이전트는 포인터의 히트 테스트 대상에 영향을 준 레이아웃 변경 후 특정 경계 이벤트를 발생시켜야 한다. 자세한 내용은 pointerover, pointerenter, pointerout 및 pointerleave를 참조한다. 사용자 에이전트는 성능상의 이유(예: 지나치게 많은 히트 테스트 또는 경계 이벤트 리스너로 인한 레이아웃 변경을 방지하기 위해) 이러한 경계 이벤트의 발생을 지연할 수 있다.

Pointer Events에는 X-Y 평면을 기준으로 트랜스듀서의 방향을 표현하기 위한 상호 보완적인 두 속성 집합, 즉 tiltX / tiltY(원래 Pointer Events 명세에 도입됨)와 azimuthAngle / altitudeAngle(Touch Events - Level 2 명세에서 채택됨)이 포함된다.

특정 하드웨어 및 플랫폼에 따라 사용자 에이전트는 화면 평면을 기준으로 한 트랜스듀서 방향에 대해 tiltX / tiltY 또는 altitudeAngle / azimuthAngle 중 하나의 값 집합만 받을 가능성이 높다. 사용자 에이전트는 이러한 값을 변환할 때 다음 알고리즘을 사용해야 한다.

사용자 에이전트가 azimuthAngle / altitudeAngle에서 tiltX / tiltY를 계산할 때 최종 정수 값은 Math.round [ECMASCRIPT] 규칙을 사용하여 반올림하는 것이 좋다.

/* tiltX/tiltY와 altitudeAngle/azimuthAngle 간 변환 */

function spherical2tilt(altitudeAngle, azimuthAngle) {
  const radToDeg = 180/Math.PI;

  let tiltXrad = 0;
  let tiltYrad = 0;

  if (altitudeAngle == 0) {
    // 펜이 X-Y 평면에 있다
    if (azimuthAngle == 0 || azimuthAngle == 2*Math.PI) {
      // 펜이 양의 X축에 있다
      tiltXrad = Math.PI/2;
    }
    if (azimuthAngle == Math.PI/2) {
      // 펜이 양의 Y축에 있다
      tiltYrad = Math.PI/2;
    }
    if (azimuthAngle == Math.PI) {
      // 펜이 음의 X축에 있다
      tiltXrad = -Math.PI/2;
    }
    if (azimuthAngle == 3*Math.PI/2) {
      // 펜이 음의 Y축에 있다
      tiltYrad = -Math.PI/2;
    }
    if (azimuthAngle>0 && azimuthAngle<Math.PI/2) {
      tiltXrad = Math.PI/2;
      tiltYrad = Math.PI/2;
    }
    if (azimuthAngle>Math.PI/2 && azimuthAngle<Math.PI) {
      tiltXrad = -Math.PI/2;
      tiltYrad = Math.PI/2;
    }
    if (azimuthAngle>Math.PI && azimuthAngle<3*Math.PI/2) {
      tiltXrad = -Math.PI/2;
      tiltYrad = -Math.PI/2;
    }
    if (azimuthAngle>3*Math.PI/2 && azimuthAngle<2*Math.PI) {
      tiltXrad = Math.PI/2;
      tiltYrad = -Math.PI/2;
    }
  }

  if (altitudeAngle != 0) {
    const tanAlt = Math.tan(altitudeAngle);

    tiltXrad = Math.atan(Math.cos(azimuthAngle) / tanAlt);
    tiltYrad = Math.atan(Math.sin(azimuthAngle) / tanAlt);
  }

  return {"tiltX":tiltXrad*radToDeg, "tiltY":tiltYrad*radToDeg};
}

function tilt2spherical(tiltX, tiltY) {
  const tiltXrad = tiltX * Math.PI/180;
  const tiltYrad = tiltY * Math.PI/180;

  // 방위각 계산
  let azimuthAngle = 0;

  if (tiltX == 0) {
    if (tiltY > 0) {
      azimuthAngle = Math.PI/2;
    }
    else if (tiltY < 0) {
      azimuthAngle = 3*Math.PI/2;
    }
  } else if (tiltY == 0) {
    if (tiltX < 0) {
      azimuthAngle = Math.PI;
    }
  } else if (Math.abs(tiltX) == 90 || Math.abs(tiltY) == 90) {
    // 방위각을 계산하기에 정보가 충분하지 않음
    azimuthAngle = 0;
  } else {
    // 경계가 아닌 경우: tiltX와 tiltY 모두 0 또는 +-90이 아님
    const tanX = Math.tan(tiltXrad);
    const tanY = Math.tan(tiltYrad);

    azimuthAngle = Math.atan2(tanY, tanX);
    if (azimuthAngle < 0) {
      azimuthAngle += 2*Math.PI;
    }
  }

  // 고도각 계산
  let altitudeAngle = 0;

  if (Math.abs(tiltX) == 90 || Math.abs(tiltY) == 90) {
      altitudeAngle = 0
  } else if (tiltX == 0) {
    altitudeAngle = Math.PI/2 - Math.abs(tiltYrad);
  } else if (tiltY == 0) {
    altitudeAngle = Math.PI/2 - Math.abs(tiltXrad);
  } else {
    // 경계가 아닌 경우: tiltX와 tiltY 모두 0 또는 +-90이 아님
    altitudeAngle =  Math.atan(1.0/Math.sqrt(Math.pow(Math.tan(tiltXrad),2) + Math.pow(Math.tan(tiltYrad),2)));
  }

  return {"altitudeAngle":altitudeAngle, "azimuthAngle":azimuthAngle};
}

event, eventType 및 eventTarget, bubbles, 그리고 cancelable로 PointerEvent를 초기화하려면 다음 단계를 실행한다:

1. event, eventType 및 eventTarget, bubbles 및 cancelable로 MouseEvent를 초기화한다
2. 다른 모든 속성을 기본 PointerEvent 값으로 초기화한다.

eventType 및 eventTarget, bubbles, 그리고 cancelable로 PointerEvent를 생성하려면 다음 단계를 실행한다:

1. event를 PointerEvent를 사용하여 이벤트를 생성한 결과로 둔다
2. event, eventType 및 eventTarget, bubbles 및 cancelable로 PointerEvent를 초기화한다
3. event를 반환한다

1. eventType을 이벤트 유형을 포함하는 DOMString으로 둔다
2. mouseevent를 해당 MouseEvent로 둔다
3. event를 PointerEvent를 사용하여 이벤트를 생성한 결과로 둔다
4. target을 mouseevent.target으로 둔다
5. event, eventType 및 target으로 PointerEvent를 초기화한다
6. MouseEvent 속성을 mouseevent에서 event로 복사한다
7. event를 반환한다

사용자 에이전트는 다음 중 하나가 발생하면 포인터 이벤트를 발생시켜 pointerover라고 명명해야 한다:

• 포인터의 대상을 결정하는 단계에서 포인터가 요소 안으로 이동한 것을 감지한다.
• 레이아웃 변경으로 인해 요소의 히트 테스트 경계가 정지한 포인팅 장치의 캡처되지 않은 포인터 아래로 이동한다.
• 사용자 에이전트가 pointerdown 이벤트를 호버를 지원하지 않는 장치에 대해 발생시키기 전(pointerdown 참조).

사용자 에이전트는 반드시 포인터 이벤트를 발생시켜야 합니다. 이벤트 이름은 pointerenter이며, 다음 중 하나가 발생하면 발생시킵니다:

• 해당 단계인 대상 결정에서 포인터에 대해 감지한 사실이 포인터가 요소 또는 그 자손 중 하나로 이동했다는 것인 경우입니다.
• 레이아웃 변경으로 인해 히트 테스트에서 사용하는 요소 또는 그 자손 중 하나의 경계가 정지된 포인팅 장치의 캡처되지 않은 포인터 아래로 이동하는 경우입니다.
• 사용자 에이전트가 발생시키기 전인 pointerdown 이벤트의 대상 장치가 호버를 지원하지 않는 경우입니다 (참조: pointerdown).

사용자 에이전트는 반드시 포인터 이벤트를 발생시켜야 합니다. 이벤트 이름은 pointerdown이며, 포인터가 다음 상태에 들어갈 때 발생시킵니다: 활성 버튼 상태. 마우스의 경우, 이는 장치가 어느 버튼도 눌리지 않은 상태에서 하나 이상의 버튼이 눌린 상태로 전환할 때입니다. 터치의 경우, 이는 물리적인 접촉이 이루어질 때이며, 접촉 대상은 디지타이저입니다. 펜의 경우, 이는 펜이 어떤 버튼도 눌리지 않은 채 디지타이저와 물리적으로 접촉하거나, 상태가 전환되어 호버링 중에 어느 버튼도 눌리지 않은 상태에서 하나 이상의 버튼이 눌린 상태가 될 때입니다.

입력 장치가 지원하지 않는 것이 호버인 경우, 사용자 에이전트가 반드시 추가로 발생시켜야 하는 포인터 이벤트의 이름은 pointerover이며, 그 뒤에 이어지는 포인터 이벤트의 이름은 pointerenter입니다. 이는 다음보다 앞서야 합니다: 디스패치되는 pointerdown 이벤트.

포인터에서 pointerdown 또는 pointerup 이벤트를 발생시키지 않는 속성이 변경되면 사용자 에이전트는 포인터 이벤트를 발생시켜 pointermove라고 명명해야 한다. 여기에는 좌표, 압력, 접선 압력, 기울기, 비틀림, 접촉 형상(width 및 height) 또는 동시 버튼의 변경이 포함된다.

사용자 에이전트는 pointermove 이벤트의 디스패치를 (예: 성능상의 이유로) 지연할 수 있다. 병합된 이벤트 정보는 디스패치된 단일 pointermove 이벤트에 대해 getCoalescedEvents 메서드를 통해 노출된다. 이러한 이벤트의 최종 좌표를 이벤트의 대상을 찾는 데 사용해야 한다.

포인터에서 pointerdown 또는 pointerup 이벤트를 발생시키지 않는 속성이 변경되면 사용자 에이전트는 포인터 이벤트를 발생시켜 pointerrawupdate라고 명명해야 하며, 보안 컨텍스트 내에서만 그렇게 해야 한다. 이러한 속성의 목록은 pointermove 이벤트를 참조한다.

pointermove와 달리, 사용자 에이전트는 pointerrawupdate 이벤트를 가능한 한 빨리, JavaScript가 이벤트를 처리할 수 있는 만큼 자주 디스패치하는 것이 좋다.

pointerrawupdate 이벤트의 target은 pointermove 이벤트와 다를 수 있다. 이는 pointermove 이벤트가 지연되거나 병합될 수 있고, target을 찾는 데 사용되는 이벤트의 최종 위치가 병합된 이벤트와 다를 수 있기 때문이다.

아직 이벤트 루프에서 디스패치되지 않은 동일한 pointerId를 가진 다른 pointerrawupdate가 이미 있는 경우, 사용자 에이전트는 새 pointerrawupdate를 새 태스크를 생성하는 대신 해당 이벤트와 병합할 수 있다. 이로 인해 pointerrawupdate에 병합된 이벤트가 포함될 수 있으며, 이벤트가 이벤트 루프에서 처리되는 즉시 모두 하나의 pointerrawupdate 이벤트의 병합된 이벤트로 전달된다. 자세한 내용은 getCoalescedEvents를 참조한다.

pointerrawupdate와 pointermove의 순서와 관련하여, 사용자 에이전트가 플랫폼으로부터 pointerrawupdate 및 pointermove 이벤트를 모두 발생시키는 업데이트를 수신한 경우, 사용자 에이전트는 해당 pointermove보다 먼저 pointerrawupdate 이벤트를 디스패치해야 한다.

target을 제외하면 마지막 pointermove 이벤트 이후 디스패치된 모든 pointerrawupdate 이벤트의 병합된 이벤트 목록을 연결한 것은 다른 이벤트 속성 측면에서 다음 pointermove 이벤트의 병합된 이벤트와 동일하다. pointerrawupdate의 속성은 대부분 pointermove와 동일하지만, pointerrawupdate에서는 cancelable이 반드시 false여야 한다는 점이 다르다.

사용자 에이전트는 pointerrawupdate에 대해 호환성 마우스 이벤트를 발생시키지 않는 것이 좋다.

사용자 에이전트는 반드시 포인터 이벤트를 발생시켜야 합니다. 이벤트 이름은 pointerup이며, 포인터가 다음 상태에서 벗어날 때 발생시킵니다: 활성 버튼 상태. 마우스의 경우, 이는 장치가 하나 이상의 버튼이 눌린 상태에서 어느 버튼도 눌리지 않은 상태로 전환할 때입니다. 터치의 경우, 이는 물리적인 접촉이 해제될 때이며, 접촉 대상은 디지타이저입니다. 펜의 경우, 이는 펜이 어떤 버튼도 눌리지 않은 상태에서 디지타이저와의 물리적인 접촉이 해제되거나, 상태가 전환되어 호버링 중에 하나 이상의 버튼이 눌린 상태에서 어느 버튼도 눌리지 않은 상태가 될 때입니다.

입력 장치가 지원하지 않는 것이 호버인 경우, 사용자 에이전트가 반드시 추가로 발생시켜야 하는 포인터 이벤트의 이름은 pointerout이며, 그 뒤에 이어지는 포인터 이벤트의 이름은 pointerleave입니다. 이 이벤트들은 다음 이후에 발생해야 합니다: 디스패치되는 pointerup 이벤트.

모든 pointerup 이벤트의 pressure 값은 0입니다.

사용자 에이전트가 반드시 추가로 암묵적으로 해제해야 하는 것은 포인터 캡처이며, 포인터가 현재 캡처된 경우에 적용됩니다.

사용자 에이전트는 포인터 이벤트 스트림을 억제해야 하는 시나리오를 감지하면 포인터 이벤트를 발생시켜 pointercancel이라고 명명해야 한다.

pointercancel 이벤트의 다음 속성 값은 동일한 pointerId를 가진 마지막으로 디스패치된 포인터 이벤트의 값과 일치해야 한다: width, height, pressure, tangentialPressure, tiltX, tiltY, twist, altitudeAngle, azimuthAngle, pointerType, isPrimary, 그리고 Mouse Events에서 상속된 좌표. pointercancel 이벤트의 coalescedEvents 및 predictedEvents 목록은 비어 있어야 하며, 이벤트의 cancelable 속성은 반드시 false여야 한다.

사용자 에이전트는 다음 중 하나가 발생하면 포인터 이벤트를 발생시켜 pointerout이라고 명명해야 한다:

• 포인터의 대상을 결정하는 단계에서 포인터가 요소 밖으로 이동한 것을 감지한다.
• 레이아웃 변경으로 인해 요소의 히트 테스트 경계가 정지한 포인팅 장치의 캡처되지 않은 포인터 아래에서 벗어나 이동한다.
• 사용자 에이전트가 호버를 지원하지 않는 장치에 대해 pointerup 이벤트를 발생시킨 후(pointerup 참조).
• 사용자 에이전트가 포인터 이벤트 스트림을 억제해야 하는 시나리오를 감지했다.

사용자 에이전트는 반드시 포인터 이벤트를 발생시켜야 합니다. 이벤트 이름은 pointerleave이며, 다음 중 하나가 발생하면 발생시킵니다:

• 해당 단계인 대상 결정에서 포인터에 대해 감지한 사실이 포인터가 요소 및 그 모든 자손의 바깥으로 이동했다는 것인 경우입니다.
• 레이아웃 변경으로 인해 히트 테스트에서 사용하는 요소 및 그 모든 자손의 경계가 정지된 포인팅 장치의 캡처되지 않은 포인터 아래에서 벗어나 이동하는 경우입니다.
• 사용자 에이전트가 발생시킨 후로, pointerup 이벤트가 발생한 입력 장치가 호버를 지원하지 않는 경우입니다 (참조: pointerup).
• 사용자 에이전트가 다음을 수행할 상황을 감지한 경우입니다: 포인터 이벤트 스트림 억제.

요소가 포인터 캡처를 받으면 사용자 에이전트는 포인터 이벤트를 발생시켜 gotpointercapture라고 명명해야 한다. 이 이벤트는 포인터 캡처를 받는 요소에서 발생한다. 이후 해당 포인터의 이벤트는 이 요소에서 발생한다. 포인터 캡처 설정 및 대기 중인 포인터 캡처 처리 섹션을 참조한다.

포인터의 포인터 캡처가 해제된 후 사용자 에이전트는 포인터 이벤트를 발생시켜 lostpointercapture라고 명명해야 한다. 이 이벤트는 캡처가 해제된 후 해당 포인터의 후속 이벤트보다 먼저 발생해야 한다. 이 이벤트는 포인터 캡처가 제거된 요소에서 발생한다. click, auxclick 및 contextmenu 이벤트를 제외한 해당 포인터의 모든 후속 이벤트는 이벤트 대상을 결정하기 위해 일반적인 히트 테스트 메커니즘(이 명세의 범위를 벗어남)을 따른다. 포인터 캡처 해제, 포인터 캡처의 암시적 해제 및 대기 중인 포인터 캡처 처리 섹션을 참조한다.

이 섹션은 MouseEvent의 click, auxclick 및 contextmenu 이벤트 정의에 추가되는 내용이다. 이러한 이벤트는 일반적으로 사용자 인터페이스 활성화와 연관되며 키보드와 같은 비포인터 입력 장치에서도 발생한다.

이러한 이벤트는 PointerEvent 유형이어야 하며, 이 섹션의 나머지 부분에 언급된 추가 요구사항의 적용을 받는다.

이 섹션의 알고리즘은 네이티브 플랫폼 OS가 다음을 제공한다고 가정한다:

• 마우스가 이동할 때의 이벤트(네이티브 마우스 이동 처리에서 처리)
• 마우스 버튼을 누를 때의 이벤트(네이티브 마우스 다운 처리에서 처리)
• 마우스 버튼을 놓을 때의 이벤트(네이티브 마우스 업 처리에서 처리)
• 마우스 버튼 누름을 "클릭"으로 해석해야 하는 시점을 식별하는 방법(네이티브 마우스 클릭 처리에서 처리)
  • 예를 들어 플래그 또는 별도의 이벤트로 제공
  • 별도의 "click" 이벤트가 발생하는 경우 네이티브 OS는 그 사이에 마우스 관련 이벤트 없이 해당 "mouse up" 이벤트 직후에 이를 발생시킨다
• 마우스 클릭이 "더블 클릭"인지 식별하는 방법(네이티브 마우스 더블 클릭 처리에서 처리)

이러한 이벤트에 대해 OS는 다음 정보를 제공할 수 있다:

• 네이티브 OS 데스크톱을 기준으로 한 x,y 마우스 좌표
• UA의 창 뷰포트를 기준으로 한 x,y 마우스 좌표
• 현재 누르고 있는 키보드 수정자

일반적으로 Event 인터페이스의 생성자나, Event 인터페이스를 상속한 인터페이스의 생성자가 호출되면, 다음에 설명된 단계를 따르는 것이 좋습니다: [DOM]. 그러나 MouseEvent 인터페이스는 추가적인 딕셔너리 멤버를 제공하여 Event 객체의 키 수정자 내부 상태를 초기화할 수 있게 합니다. 구체적으로는 다음 getModifierState() 메서드로 조회하는 내부 상태입니다. 이 절은 [DOM]의 단계를 보완하여, 새로운 MouseEvent 객체를 이러한 선택적 수정자 상태로 초기화할 수 있게 합니다.

아래 알고리즘으로 MouseEvent 또는 이러한 객체에서 파생된 객체를 생성할 수 있도록, 모든 MouseEvent 및 파생 객체는 내부 키 수정자 상태를 가지며, 다음을 사용하여 이를 설정하고 조회할 수 있습니다: 키 수정자 이름. 이 이름은 수정자 키 표에 설명되어 있으며, 해당 표는 [UIEvents-Key]에 있습니다.

다음 단계는 이벤트 생성 알고리즘을 보완하며, 이 알고리즘은 [DOM]에 정의되어 있습니다:

• 생성 중인 Event가 MouseEvent 객체이거나 이 객체에서 파생된 객체이고, EventModifierInit 인수가 생성자에 제공되었다면, 다음 하위 단계를 실행합니다:
  • 각 EventModifierInit 인수에 대해, 딕셔너리 멤버가 문자열 "modifier"로 시작하면, 키 수정자 이름을 해당 딕셔너리 멤버 이름에서 접두사 "modifier"를 제외한 이름으로 두고, Event 객체의 내부 키 수정자 상태 중 키 수정자 이름과 일치하는 상태를 해당 값으로 설정합니다.

MouseEvent에는 다양한 수정자 키의 상태를 추적하는 데 사용되는 다음 내부 플래그가 있다: shift 플래그, control 플래그, alt 플래그, altgraph 플래그, 그리고 meta 플래그. 해당 수정자 키가 마우스 이벤트 시점에 눌려 있었다면 이러한 플래그가 설정된다.

1. pos를 뷰포트를 기준으로 한 x,y 좌표로 둔다
2. pos로 [CSSOM-View]의 elementFromPoint() (pos에서 가장 앞쪽에 있는 DOM 요소)를 반환한다
   참고

   비활성 또는 사용 불가 요소를 고려하려면, 이는 elementsFromPoint()를 호출하고 유효하지 않은 요소를 제외해야 한다.

event, eventType 및 eventTarget, bubbles, 그리고 cancelable로 MouseEvent를 초기화하려면 다음 단계를 실행한다:

1. event, eventType, eventTarget, bubbles 및 cancelable로 UIEvent를 초기화한다.
2. event.screenX를 데스크톱의 원점을 기준으로 이벤트가 발생한 위치의 x 좌표로 설정한다
3. event.screenY를 데스크톱의 원점을 기준으로 이벤트가 발생한 위치의 y 좌표로 설정한다
4. event.clientX를 뷰포트의 원점을 기준으로 이벤트가 발생한 위치의 x 좌표로 설정한다
5. event.clientY를 뷰포트의 원점을 기준으로 이벤트가 발생한 위치의 y 좌표로 설정한다
6. event로 마우스 이벤트 수정자를 설정한다
7. event.button을 0으로 설정한다
8. event.buttons를 마우스 버튼 비트마스크로 설정한다
9. event로 MouseEvent의 PointerLock 속성을 초기화한다
   이슈 1

   여기에서 PointerLock을 하드코딩하는 대신 이를 위한 훅을 제공해야 한다.

1. event를 갱신할 MouseEvent로 둔다
2. 키 수정자 상태에 "Shift"가 포함되어 있으면 event의 shift 플래그를 설정하고, 그렇지 않으면 설정 해제한다
3. 키 수정자 상태에 "Control"이 포함되어 있으면 event의 control 플래그를 설정하고, 그렇지 않으면 설정 해제한다
4. 키 수정자 상태에 "Alt"가 포함되어 있으면 event의 alt 플래그를 설정하고, 그렇지 않으면 설정 해제한다
5. 키 수정자 상태에 "AltGraph"가 포함되어 있으면 event의 altgraph 플래그를 설정하고, 그렇지 않으면 설정 해제한다
6. 키 수정자 상태에 "Meta"가 포함되어 있으면 event의 meta 플래그를 설정하고, 그렇지 않으면 설정 해제한다
7. 이벤트의 shift 플래그가 설정되어 있으면 event.shiftKey를 true로 설정하고, 그렇지 않으면 false로 설정한다
8. 이벤트의 control 플래그가 설정되어 있으면 event.ctrlKey를 true로 설정하고, 그렇지 않으면 false로 설정한다
9. 이벤트의 alt 플래그 또는 altgraph 플래그가 설정되어 있으면 event.altKey를 true로 설정하고, 그렇지 않으면 false로 설정한다
10. 이벤트의 meta 플래그가 설정되어 있으면 event.metaKey를 true로 설정하고, 그렇지 않으면 false로 설정한다

1. eventType을 유효한 MouseEvent 유형을 포함하는 DOMString으로 둔다
2. eventTarget을 이벤트의 EventTarget으로 둔다
3. bubbles를 true로 둔다
4. cancelable을 true로 둔다
5. event를 MouseEvent를 사용하여 이벤트를 생성한 결과로 둔다
6. event, eventType, eventTarget, bubbles 및 cancelable로 MouseEvent를 초기화한다.
7. event를 반환한다

1. eventType을 유효한 MouseEvent 유형을 포함하는 DOMString으로 둔다
2. eventTarget을 이벤트의 EventTarget으로 둔다
3. bubbles를 "false"로 둔다
4. cancelable을 "false"로 둔다
5. event를 MouseEvent를 사용하여 이벤트를 생성한 결과로 둔다
6. event, eventType, eventTarget, bubbles 및 cancelable로 MouseEvent를 초기화한다.
7. event를 반환한다

이는 MouseEvent의 button 속성에 저장하기에 적합한 버튼 ID를 반환한다.

1. mbutton을 마우스 버튼을 식별하는 ID로 둔다
2. mbutton이 주 마우스 버튼이면 0을 반환한다
3. mbutton이 보조(가운데) 마우스 버튼이면 1을 반환한다
4. mbutton이 보조 마우스 버튼이면 2를 반환한다
5. mbutton이 X1(뒤로) 버튼이면 3을 반환한다
6. mbutton이 X2(앞으로) 버튼이면 4를 반환한다

1. event를 초기화할 MouseEvent로 둔다
2. native를 네이티브 마우스 이벤트로 둔다
   편집자 주

   TODO.

3. event.type이 [ mousedown, mouseup ] 중 하나이면
   1. mbutton을 어떤 마우스 버튼이 눌렸는지 식별하는 native의 ID로 둔다
   2. event.button을 mbutton으로 MouseEvent button 속성 계산한 결과로 설정한다

1. native를 네이티브 mousedown으로 둔다
2. mbutton을 어떤 마우스 버튼이 눌렸는지 식별하는 native의 ID로 둔다
3. 마우스 버튼 비트마스크를 다음과 같이 갱신한다:
   1. mbutton이 주 마우스 버튼이면 0x01 비트를 설정한다
   2. mbutton이 보조 마우스 버튼이면 0x02 비트를 설정한다
   3. mbutton이 보조(가운데) 마우스 버튼이면 0x04 비트를 설정한다
      참고

      다른 버튼은 0x08부터 추가할 수 있다.

4. target을 native의 뷰포트 상대 좌표로 히트 테스트한 결과로 둔다
5. event를 "mousedown", target으로 취소 가능한 MouseEvent를 생성한 결과로 둔다
6. native로 네이티브에서 MouseEvent 속성을 설정한다
7. 필요한 경우 event를 사용하여 pointerdown 이벤트를 보냅니다.
8. result를 target에서 event를 디스패치한 결과로 둔다
9. result가 true이고 target이 포커스 가능한 영역이며 클릭 포커스 가능한 경우
   1. target에서 포커스 단계를 실행한다
10. mbutton이 보조 마우스 버튼이면
    1. native, target으로 컨텍스트 메뉴를 표시할 수 있음을 실행한다

1. native를 네이티브 mouseup으로 설정합니다
   참고

   mousedown과 mouseup 사이에 다른 마우스 이벤트가 발생할 수 있습니다.

2. mbutton을 native에서 어떤 마우스 버튼이 눌렸는지를 식별하는 ID로 설정합니다
3. 마우스 버튼 비트마스크를 다음과 같이 업데이트합니다:
   1. mbutton이 기본 마우스 버튼이면 0x01 비트를 지웁니다
   2. mbutton이 보조 마우스 버튼이면 0x02 비트를 지웁니다
   3. mbutton이 보조(가운데) 마우스 버튼이면 0x04 비트를 지웁니다
4. target을 native의 뷰포트 상대 좌표를 사용하여 히트 테스트한 결과로 설정합니다
5. event를 "mouseup", target을 사용하여 취소 가능한 MouseEvent를 생성한 결과로 설정합니다
6. native를 사용하여 네이티브로부터 MouseEvent 속성을 설정합니다
7. 필요한 경우 event로 pointerup 이벤트를 전송합니다
8. target에서 event를 디스패치합니다

1. native를 네이티브 마우스 클릭으로 설정합니다
   참고

   플랫폼은 클릭을 생성하는 mouseup에 대해 네이티브 마우스 버튼 놓기를 처리한 직후 이 절차를 호출해야 합니다.

2. target을 native의 뷰포트 상대 좌표를 사용하여 히트 테스트한 결과로 설정합니다
3. native와 target을 사용하여 클릭 이벤트를 전송합니다.

1. native를 네이티브 mousedown으로 설정합니다
2. target을 이벤트의 EventTarget으로 설정합니다
3. mbutton을 1로 설정합니다(기본적으로 주 마우스 버튼)
4. native가 유효하면
   1. mbutton을 native에서 어떤 마우스 버튼이 눌렸는지 식별하는 ID로 설정합니다
5. mbutton이 주 마우스 버튼이면 eventType을 "click"으로, 그렇지 않으면 "auxclick"으로 설정합니다
6. event를 eventType과 target을 사용하여 PointerEvent를 생성한 결과로 설정합니다
7. native가 유효하면
   1. event와 native를 사용하여 네이티브로부터 MouseEvent 속성을 설정합니다
   2. event.screenX가 정숫값이 아니면 반올림합니다.
   3. event.screenY가 정숫값이 아니면 반올림합니다.
8. target에서 event를 디스패치합니다
   참고

   PointerEvents를 사용하는 브라우저와 반올림된 좌표에 관한 정보는 pointerevents/100을 참조하세요.

   편집자 주

   모든 "기본 동작"은 디스패치 중 대상의 활성화 동작 알고리즘을 트리거하여 처리됩니다. 따라서 여기서 별도로 처리할 필요가 없습니다. 다만 기존 명세가 다음 항목을 처리하는지 확인해야 합니다: disabled/css-pointer-events/inert/...

   참고

   HTMLelement.click()을 처리하려면 native = null, target = HTMLelement로 이 알고리즘을 호출합니다.

   참고

   키보드로 시작된 클릭을 처리하려면 native = null로 설정하고 target = 현재 포커스된 요소로 이 알고리즘을 호출합니다.

1. native를 네이티브 마우스 더블 클릭으로 설정합니다
   참고

   더블 클릭을 생성하는 마우스 클릭의 경우 네이티브 마우스 클릭을 처리한 직후 이 절차를 호출해야 합니다.

2. mbutton을 native에서 어떤 마우스 버튼이 눌렸는지 식별하는 ID로 설정합니다
3. mbutton이 주 마우스 버튼이 아니면 반환합니다
4. target을 native의 뷰포트 상대 좌표를 사용하여 히트 테스트한 결과로 설정합니다
5. event를 "dblclick"과 target을 사용하여 PointerEvent를 생성한 결과로 설정합니다
6. event와 native를 사용하여 네이티브로부터 MouseEvent 속성을 설정합니다
7. event.screenX가 정숫값이 아니면 반올림합니다.
8. event.screenY가 정숫값이 아니면 반올림합니다.
9. 디스패치합니다 event를 target에서

1. native를 네이티브 마우스 이동으로 설정합니다
   문제 2

   이 알고리즘은 PointerEvents의 디스패치에 대해 가정하고 있는데, 이는 현재 명시적으로 규정되어 있지 않기 때문입니다. pointerevents/285가 해결되면 이 알고리즘을 업데이트해야 할 수 있습니다.

2. target을 native의 뷰포트 상대 좌표를 사용하여 히트 테스트한 결과로 설정합니다
3. targetDomPath를 target의 포괄적 조상으로 설정합니다
4. 현재 요소에서 벗어날 때 발생하는 이벤트를 생성합니다:
   1. 마지막 마우스 요소가 정의되어 있고 target과 같지 않으면
      1. mouseout을 "mouseout"과 취소 가능한 MouseEvent를 생성할 때 마지막 마우스 요소를 사용한 결과로 설정합니다
         편집자 주

         TODO: native에서 mouseout의 속성을 설정합니다. +CSSOM 속성.

   2. 필요한 경우 mouseout으로 pointerout 이벤트를 전송합니다
   3. 디스패치합니다 target에서 mouseout을
      참고

      취소되었을 때의 동작을 확인해야 합니다(영향이 없는 것으로 보입니다).

   4. leaveElements를 마지막 마우스 DOM 경로에서 targetDomPath와 공통된 모든 요소를 제거한 복사본으로 설정합니다.
   5. leaveElements의 각 element에 대해 다음을 수행합니다
      편집자 주

      element가 삭제된 경우를 처리해야 합니다. 이동된 경우도 마찬가지입니다. DOM 변경으로 인해 mouseleave 이벤트가 트리거되어야 했을까요? 지금 전송해야 할까요? 무시해야 할까요? 현재 브라우저의 동작을 확인해야 합니다.

      1. mouseleave를 "mouseleave"와 element를 사용하여 취소할 수 없는 MouseEvent를 생성한 결과로 설정합니다
      2. mouseleave.Event.composed를 = false로 설정합니다
         참고

         호환성을 확인해야 합니다: event.composed의 값입니다. 명세에서는 false라고 규정합니다. Chrome/Linux = true입니다. Firefox/Linux = false입니다.

      3. 필요한 경우 mouseleave로 pointerleave 이벤트를 전송합니다
      4. result를 element에서 mouseleave를 디스패치한 결과로 설정합니다
5. 새 요소에 진입할 때 발생하는 이벤트를 생성합니다:
   1. target이 마지막 마우스 요소가 아니면
      1. mouseover를 "mouseover"와 target을 사용하여 취소 가능한 MouseEvent를 생성한 결과로 설정합니다
         편집자 주

         TODO: native에서 mouseout의 속성을 설정합니다. +CSSOM 속성.

      2. 필요한 경우 mouseover로 pointerover 이벤트를 전송합니다
      3. 디스패치합니다 target에서 mouseout을
         참고

         취소되었을 때의 동작을 확인해야 합니다(영향이 없는 것으로 보입니다).

      4. enterElements를 targetDomPath에서 마지막 마우스 DOM 경로와 공통된 모든 요소를 제거한 복사본으로 설정합니다
      5. enterElements의 각 element에 대해 다음을 수행합니다
         참고

         element가 삭제되거나 이동된 경우를 처리해야 합니다.

         1. mouseenter를 "mouseenter"와 element를 사용하여 취소할 수 없는 MouseEvent를 생성한 결과로 설정합니다
         2. mouseenter.Event.composed를 = false로 설정합니다
            참고

            호환성을 확인해야 합니다: event.composed의 값입니다. 명세에서는 false라고 규정합니다. Chrome/Linux = true입니다. Firefox/Linux = false입니다.

         3. 필요한 경우 mouseenter로 pointerenter 이벤트를 전송합니다
            참고

            섀도 DOM 요소에 대한 호환성을 확인해야 합니다. Chrome/Linux에서는 이 이벤트가 해당 요소와 섀도 루트에서 발생합니다.

         4. result를 element에서 mouseenter를 디스패치한 결과로 설정합니다
      6. 마지막 마우스 요소를 target으로 설정합니다
      7. 마지막 마우스 DOM 경로를 targetDomPath로 설정합니다
6. mousemove를 "mousemove"와 element를 사용하여 취소 가능한 MouseEvent를 생성한 결과로 설정합니다
7. mousemove에 대한 PointerLock 속성을 설정합니다
8. 필요한 경우 mousemove로 pointermove 이벤트를 전송합니다
9. 디스패치합니다 element에서 mousemove를

1. native를 네이티브 mousedown 또는 포인터 이벤트로 설정합니다
2. target을 이벤트의 EventTarget으로 설정합니다
   1. menuevent를 "contextmenu"와 target을 사용하여 PointerEvent를 생성한 결과로 설정합니다
   2. native가 유효하면
      1. native를 사용하여 네이티브로부터 MouseEvent 속성을 설정합니다
   3. result를 target에서 menuevent를 디스패치한 결과로 설정합니다
   4. result가 true이면 사용자 에이전트의 컨텍스트 메뉴를 표시합니다

사용자가 주가 아닌 포인터 버튼을 누르고 놓거나, 그와 같은 동작을 시뮬레이션하는 방식으로 포인터를 활성화하는 경우 auxclick 이벤트 유형은 포인터가 가리키는 최상위 이벤트 대상에 디스패치되어MUST 한다. 마우스 버튼의 작동 방식은 포인터 장치와 환경 구성에 따라 달라지며, 예를 들어 화면 위치나 포인팅 장치 버튼을 누르고 놓는 사이의 지연 시간에 따라 달라질 MAY 있다.

auxclick 이벤트는 주가 아닌 포인터 버튼에 대해서만 발생시키는 것이 좋다(즉, button 값이 0이 아니고, buttons 값이 1보다 큰 경우). 주 버튼 (표준 마우스의 왼쪽 버튼 등)은 auxclick 이벤트를 발생시켜MUST NOT 한다. 주 버튼과 연결된 해당 이벤트는 click을 참조한다.

auxclick 이벤트보다 먼저 동일한 요소에서 mousedown 및 mouseup 이벤트가 발생할 MAY 있으며, 다른 노드 유형 (예: 텍스트 노드) 사이의 변화는 무시한다. 환경 구성에 따라 포인팅 장치 버튼을 누르고 놓는 사이에 mouseover, mousemove 및 mouseout 이벤트 유형 중 하나 이상이 발생하더라도 auxclick 이벤트가 디스패치될 MAY 있다.

auxclick 이벤트 유형의 기본 동작은 이벤트의 대상과 button 또는 buttons 속성 값에 따라 달라진다. auxclick 이벤트 유형의 일반적인 기본 동작은 다음과 같다:

• 대상에 연결된 활성화 동작이 있는 경우 기본 동작은 해당 활성화 동작을 실행하는 것이어MUST 한다.

myLink.addEventListener("auxclick", function(e) {
  if (e.button === 1) {
    // 예를 들어 링크를 가운데 클릭할 때 새 탭을 여는
    // 기본 동작을 방지한다.
    e.preventDefault();
    // 앱에 맞는 방식으로 새 탭에서 링크 또는 링크가 아닌 버튼을
    // 여는 것처럼 가운데 버튼 클릭을 처리하기 위한 다른 작업을 수행한다.
    // 탭 표시줄에서 탭을 닫는 것처럼 클릭 동작에서 수행해야 하는
    // 다른 작업도 여기에서 수행할 수 있다.
  }
});

myDiv.addEventListener("contextmenu", function(e) {
  // 이 호출은 컨텍스트 메뉴가 표시되어
  // 페이지의 이벤트 수신을 방해하지 않도록 한다.
  e.preventDefault();
});
myDiv.addEventListener("auxclick", function(e) {
  if (e.button === 2) {
    // 앱 내부에서 사용자 정의 컨텍스트 메뉴를 여는 것처럼
    // 오른쪽 버튼 클릭을 처리하기 위한 다른 작업을 수행한다.
  }
});

사용자가 주 포인터 버튼을 누르고 놓거나, 그와 같은 동작을 시뮬레이션하는 방식으로 포인터를 활성화하는 경우 click 이벤트 유형은 포인터가 가리키는 최상위 이벤트 대상에 디스패치되어MUST 한다. 마우스 버튼의 작동 방식은 포인터 장치와 환경 구성에 따라 달라지며, 예를 들어 화면 위치나 포인팅 장치 버튼을 누르고 놓는 사이의 지연 시간에 따라 달라질 MAY 있다.

click 이벤트는 주 포인터 버튼에 대해서만 발생시키는 것이 좋다(즉, button 값이 0이고, buttons 값이 1인 경우). 보조 버튼 (표준 마우스의 가운데 또는 오른쪽 버튼 등)은 click 이벤트를 발생시켜MUST NOT 한다. 주가 아닌 버튼과 연결된 해당 이벤트는 auxclick을 참조한다.

click 이벤트보다 먼저 mousedown 및 mouseup 이벤트가 동일한 요소에서 발생할 MAY 있으며, 다른 노드 유형 (예: 텍스트 노드) 사이의 변화는 무시한다. 환경 구성에 따라 포인팅 장치 버튼을 누르고 놓는 사이에 mouseover, mousemove 및 mouseout 이벤트 유형 중 하나 이상이 발생하더라도 click 이벤트가 디스패치될 MAY 있다. 또한 click 이벤트 뒤에 dblclick 이벤트가 이어질 MAY 있다.

사용자가 큰 line-height가 적용된 <p> 요소의 텍스트 노드 자식에서 마우스 버튼을 누른 뒤, 마우스를 약간 움직여 더 이상 텍스트가 포함된 영역 위에는 있지 않지만 여전히 해당 <p> 요소의 포함 블록 안에 있는 경우 (즉, 포인터가 동일한 텍스트 블록의 줄 사이에 있지만 텍스트 노드 자체 위에는 있지 않은 경우), 이후 마우스 버튼을 놓으면 사용자가 동일한 요소의 범위 내에 머물렀으므로 일반적인 시간적 히스테리시스 범위 내라면 click에 대해 여전히 click 이벤트가 발생할 가능성이 높다. 사용자 에이전트가 생성한 마우스 이벤트는 텍스트 노드에 디스패치되지 않는다는 점에 유의한다.

포인터 장치와 연결되는 것 외에도 click 이벤트 유형은 요소 활성화의 일부로 디스패치되어MUST 한다.

click 이벤트 유형의 기본 동작은 이벤트의 대상과 button 또는 buttons 속성 값에 따라 달라진다. click 이벤트 유형의 일반적인 기본 동작은 다음과 같다:

• 대상에 연결된 활성화 동작이 있는 경우 기본 동작은 해당 활성화 동작을 실행하는 것이어MUST 한다.
• 대상이 포커스 가능하면 기본 동작은 해당 요소에 문서 포커스를 부여하는 것이어MUST 한다.

사용자 에이전트는 컨텍스트 메뉴를 호출하기 전에 이 이벤트를 디스패치해MUST 한다.

contextmenu 이벤트가 마우스 오른쪽 버튼에 의해 트리거되는 경우 contextmenu 이벤트는 mousedown 이벤트 뒤에 디스패치되어MUST 한다.

사용자 에이전트는 포인팅 장치의 주 버튼이 요소 위에서 두 번 클릭될 때 이 이벤트를 디스패치해MUST 한다. 더블 클릭의 정의는 환경 구성에 따라 달라지지만, 이벤트 대상은 mousedown, mouseup 및 dblclick 사이에서 동일해MUST 한다. 클릭과 더블 클릭이 동시에 발생하는 경우 이 이벤트 유형은 click 이벤트 유형 뒤에 디스패치되어MUST 하며, 그렇지 않은 경우 mouseup 이벤트 유형 뒤에 디스패치되어야 한다.

click 이벤트와 마찬가지로 dblclick 이벤트는 주 포인터 버튼에 대해서만 발생시키는 것이 좋다. 보조 버튼은 dblclick 이벤트를 발생시켜MUST NOT 한다.

사용자 에이전트는 포인팅 장치 버튼이 요소 위에서 눌릴 때 이 이벤트를 디스패치해MUST 한다.

사용자 에이전트는 포인팅 장치가 요소 또는 그 자손 요소 중 하나의 경계 안으로 이동할 때 이 이벤트를 디스패치해MUST 한다. 또한 사용자 에이전트는 요소 또는 그 자손 중 하나가 이동하여 주 포인팅 장치 아래에 위치하게 될 때 이 이벤트를 디스패치해MUST 한다. 이 이벤트 유형은 mouseover와 유사하지만 버블링되지 않으며, 포인팅 장치가 요소에서 그 자손 요소 중 하나의 경계로 이동할 때는 디스패치되어MUST NOT 한다는 점에서 다르다.

사용자 에이전트는 포인팅 장치가 요소와 그 모든 자손 요소의 경계 밖으로 이동할 때 이 이벤트를 디스패치해MUST 한다. 또한 사용자 에이전트는 요소 또는 그 자손 중 하나가 이동하여 더 이상 주 포인팅 장치 아래에 있지 않게 될 때 이 이벤트를 디스패치해MUST 한다. 이 이벤트 유형은 mouseout과 유사하지만 버블링되지 않으며, 포인팅 장치가 요소와 모든 자식 요소의 경계를 떠날 때까지 디스패치되어MUST NOT 한다는 점에서 다르다.

사용자 에이전트는 포인팅 장치가 요소 위에서 이동할 때 이 이벤트를 디스패치해MUST 한다. 포인팅 장치가 이동하는 동안의 이벤트 발생 빈도는 구현, 장치 및 플랫폼에 따라 다르지만, 지속적인 포인터 장치 이동에서는 각 마우스 이동마다 단일 이벤트만 발생시키는 대신 연속된 여러 mousemove 이벤트를 발생시키는 것이 SHOULD 좋다. 구현은 응답성과 성능의 균형을 맞추기 위한 최적의 빈도를 결정하는 것이 권장된다.

사용자 에이전트는 포인팅 장치가 요소의 경계 밖으로 이동하거나 요소가 이동하여 더 이상 주 포인팅 장치 아래에 있지 않게 될 때 이 이벤트를 디스패치해MUST 한다. 이 이벤트 유형은 mouseleave와 유사하지만 버블링되며, 포인팅 장치가 요소에서 그 자손 요소 중 하나의 경계로 이동할 때 디스패치되어MUST 한다는 점에서 다르다.

사용자 에이전트는 포인팅 장치가 요소의 경계 안으로 이동하거나 요소가 이동하여 주 포인팅 장치 아래에 위치하게 될 때 이 이벤트를 디스패치해MUST 한다. 이 이벤트 유형은 mouseenter와 유사하지만 버블링되며, 같은 이벤트 리스너 인스턴스의 대상인 조상 요소를 가진 요소의 경계 안으로 포인터 장치가 이동할 때 디스패치되어MUST 한다는 점에서 다르다.

사용자 에이전트는 포인팅 장치 버튼이 요소 위에서 놓일 때 이 이벤트를 디스패치해MUST 한다.

휠 이벤트에서 preventDefault를 호출하면 스크롤을 방지하거나 중단할 수 있다. 최대의 스크롤 성능을 위해 사용자 에이전트는 스크롤과 관련된 각 휠 이벤트가 취소되는지 확인하기 위해 처리될 때까지 기다리지 않을 수 있다. 이런 경우 사용자 에이전트는 cancelable 속성이 false인 wheel 이벤트를 생성하여 preventDefault로 스크롤을 방지하거나 중단할 수 없음을 나타내는 것이 좋다. 그렇지 않으면 cancelable은 true가 된다.

특히 사용자 에이전트가 이벤트에 대해 비수동 리스너가 없음을 관찰하는 경우에는 취소할 수 없는 wheel 이벤트만 생성하는 것이 좋다.