포인터 이벤트

다중 포인터(예: 멀티터치) 시나리오에서 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를 반환한다

1. mouseout을 해당 mouseout MouseEvent로 둔다
2. pointerout을 "pointerout" 및 mouseout으로 MouseEvent에서 PointerEvent를 생성한 결과로 둔다
3. pointerevent 속성을 설정한다
   편집자 주

   TODO.

4. target을 mouseout.target으로 둔다
5. pointerout을 target에서 디스패치한다

1. mouseout을 해당 mouseout MouseEvent로 둔다
2. pointerout을 "pointerout" 및 mouseout으로 MouseEvent에서 PointerEvent를 생성한 결과로 둔다
3. pointerevent 속성을 설정한다
   편집자 주

   TODO.

4. target을 mouseout.target으로 둔다
5. pointerout을 target에서 디스패치한다

1. mouseout을 해당 mouseout MouseEvent로 둔다
2. pointerout을 "pointerout" 및 mouseout으로 MouseEvent에서 PointerEvent를 생성한 결과로 둔다
3. pointerevent 속성을 설정한다
   편집자 주

   TODO.

4. target을 mouseout.target으로 둔다
5. pointerout을 target에서 디스패치한다

1. mouseout을 해당 mouseout MouseEvent로 둔다
2. pointerout을 "pointerout" 및 mouseout으로 MouseEvent에서 PointerEvent를 생성한 결과로 둔다
3. pointerevent 속성을 설정한다
   편집자 주

   TODO.

4. target을 mouseout.target으로 둔다
5. pointerout을 target에서 디스패치한다

1. mouseout을 해당 mouseout MouseEvent로 둔다
   편집자 주

   이것이 pointermove와 pointerrawupdate를 전송할 수 있는가? 아니면 메서드가 2개 필요한가?

   편집자 주

   pointermove 이벤트가 병합되는 방식을 올바르게 정의하려면 무엇이 필요한가?

2. pointerout을 "pointerout" 및 mouseout으로 MouseEvent에서 PointerEvent를 생성한 결과로 둔다
3. pointerevent 속성을 설정한다
   편집자 주

   TODO.

4. target을 mouseout.target으로 둔다
5. pointerout을 target에서 디스패치한다

1. mouseout을 해당 mouseout MouseEvent로 둔다
   참고

   mousedown 이벤트와 달리 여러 버튼이 눌렸을 때 pointerdown 이벤트는 중첩되지 않는다. 필드를 PointerEvent로 복사할 수 있도록 MouseEvent가 전달된다.

2. pointerout을 "pointerout" 및 mouseout으로 MouseEvent에서 PointerEvent를 생성한 결과로 둔다
3. pointerevent 속성을 설정한다
   편집자 주

   TODO.

4. target을 mouseout.target으로 둔다
5. pointerout을 target에서 디스패치한다

1. mouseout을 해당 mouseout MouseEvent로 둔다
2. target을 mouseout.target으로 둔다
3. pointerout을 target에서 디스패치한다

1. mouseout을 해당 mouseout MouseEvent로 둔다
   참고

   mouseup 이벤트와 달리 여러 버튼이 눌렸을 때 pointerup 이벤트는 중첩되지 않는다. 필드를 PointerEvent로 복사할 수 있도록 MouseEvent가 전달된다.

2. pointerout을 "pointerout" 및 mouseout으로 MouseEvent에서 PointerEvent를 생성한 결과로 둔다
3. pointerevent 속성을 설정한다
   편집자 주

   TODO.

4. target을 mouseout.target으로 둔다
5. pointerout을 target에서 디스패치한다

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

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

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

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

포인터가 활성 버튼 상태에 들어가면 사용자 에이전트는 포인터 이벤트를 발생시켜 pointerdown이라고 명명해야 한다. 마우스의 경우 이는 장치가 눌린 버튼이 없는 상태에서 하나 이상의 버튼이 눌린 상태로 전환될 때이다. 터치의 경우 디지타이저와 물리적으로 접촉할 때이다. 펜의 경우 아무 버튼도 눌리지 않은 상태에서 펜이 디지타이저와 물리적으로 접촉하거나, 호버 중에 아무 버튼도 눌리지 않은 상태에서 하나 이상의 버튼이 눌린 상태로 전환될 때이다.

호버를 지원하지 않는 입력 장치의 경우 사용자 에이전트는 pointerdown 이벤트를 디스패치하기 전에 포인터 이벤트를 발생시켜 pointerover라고 명명한 뒤, 이어서 pointerenter라고 명명한 포인터 이벤트를 발생시켜야 한다.

포인터에서 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이라고 명명해야 한다. 마우스의 경우 이는 장치가 하나 이상의 버튼이 눌린 상태에서 눌린 버튼이 없는 상태로 전환될 때이다. 터치의 경우 디지타이저와의 물리적 접촉이 제거될 때이다. 펜의 경우 아무 버튼도 눌리지 않은 상태에서 펜이 디지타이저와의 물리적 접촉에서 떨어지거나, 호버 중에 하나 이상의 버튼이 눌린 상태에서 눌린 버튼이 없는 상태로 전환될 때이다.

호버를 지원하지 않는 입력 장치의 경우, 사용자 에이전트는 pointerup 이벤트를 디스패치한 후 포인터 이벤트를 발생시켜 pointerout이라고 명명한 뒤, 이어서 pointerleave라고 명명한 포인터 이벤트를 발생시켜야 한다.

모든 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() 메서드로 조회하는 내부 상태이다. 이 섹션은 이러한 선택적 수정자 상태를 사용하여 새로운 MouseEvent 객체를 초기화하기 위한 [DOM] 단계를 보완한다.

아래 알고리즘을 사용하여 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으로 click 이벤트를 전송한다.

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. target에서 event를 디스패치한다

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 이벤트를 전송할 수 있음을 실행한다
            참고

            shadow DOM 요소의 호환성을 확인해야 한다. Chrome/Linux는 요소와 shadow root에서 이 이벤트를 발생시킨다.

         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이면 UA 컨텍스트 메뉴를 표시한다

사용자가 주가 아닌 포인터 버튼을 누르고 놓거나, 그와 같은 동작을 시뮬레이션하는 방식으로 포인터를 활성화하는 경우 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 이벤트만 생성하는 것이 좋다.