# Chapter 3 UI Events

## 3.2 Moving the mouse: mouseover/out, mouseenter/leave

### Events mouseover/mouseout, relatedTarget

* `mouseover`: a mouse pointer comes over an element.
* `mouseout`: a mouse pointer leaves the element.
* * `event.relatedTarget`: the element from which the mouse came or left for.

The relatedTarget property can be `null`.

### Skipping elements

If the visitor is moving the mouse very fast then some DOM-elements may be skipped.

### Mouseout when leaving for a child

`mouseout` triggers when the pointer moves from an element to its descendant. According to the browser logic, the mouse cursor may be only over a single element at any time – the most nested one and top by z-index. The event also may bubble to the parent.

### Events mouseenter and mouseleave

They trigger when the mouse pointer enters/leaves the element.

* Transitions inside the element, to/from descendants, are not counted.
* Events `mouseenter`/`mouseleave` do not bubble.

## 3.4 Pointer events

### The brief history

* Long ago, there were only mouse events.
* Touch events were introduced, such as `touchstart`, `touchend`, `touchmove`.
* The new standard Pointer Events was introduced. It provides a single set of events for all kinds of pointing devices.

### Pointer event types

* `pointerdown`
* `pointerup`
* `pointermove`
* `pointerover`
* `pointerout`
* `pointerenter`
* `pointerleave`
* `pointercancel`
* `gotpointercapture`
* `lostpointercapture`

We can replace `mouse<event>` events with `pointer<event>` in our code and expect things to continue working fine with mouse.

### Pointer event properties

* `pointerId` – the unique identifier of the pointer causing the event. (Allows us to handle multiple pointers)
* `pointerType` – the pointing device type. (`mouse`, `pen`, or `touch`)
* `isPrimary` – `true` for the primary pointer (the first finger)
* `width`/`height` - the width/height of the area where the pointer touches the device. (`1` for mouse)
* `pressure`: the pressure of the pointer tip, in range from 0 to 1 (default: 0.5 for pressed and 0)
* `tangentialPressure`: the normalized tangential pressure
* `tiltX`, `tiltY`, `twist` – pen-specific properties that describe how the pen is positioned relative the surface.

### Multi-touch

The `pointerId` is assigned not to the whole device, but for each touching finger.

The events associated with the first finger always have `isPrimary=true`.

### Event: pointercancel

The `pointercancel` event fires when there’s an ongoing pointer interaction, and then something happens that causes it to be aborted.

* The pointer device hardware was disabled.
* The device orientation changed (tablet rotated).
* The browser decided to handle the interaction on its own, considering it a mouse gesture or zoom-and-pan action or something else.

Prevent default browser actions to avoid `pointercancel`. Set `touch-action: none` in CSS.

### Pointer capturing

We can “bind” all events with a particular 1 to a given element.

* `elem.setPointerCapture(pointerId)` – binds the given `pointerId` to `elem`.
* `elem.releasePointerCapture(pointerId)` – unbinds the given `pointerId` from `elem`.

Pointer capturing is used to simplify drag’n’drop kind of interactions.

## 3.5 Keyboard: keydown and keyup

The `keydown` events happens when a key is pressed down, and then `keyup` – when it’s released.

### event.code and event.key

* `key`: the character (different between languages)
* `code`: physical key code (`Key<letter>`, `Digit<number>`, `Enter`, etc.)

### Default actions

* A character appears on the screen (the most obvious outcome).
* A character is deleted (`Delete` key).
* The page is scrolled (`PageDown` key).
* The browser opens the “Save Page” dialog (`Ctrl+S`)

In the past, there was a `keypress` event, and also `keyCode`, `charCode`, which properties of the event object. They are deprecated and no longer need to be used.

## 3.6 Scrolling

* Show/hide additional controls or information depending on where in the document the user is.
* Load more data when the user scrolls down till the end of the page.

### Prevent scrolling

We can’t prevent scrolling by using event.`preventDefault()` in `onscroll` listener, because it triggers after the scroll has already happened.

But we can prevent scrolling by event.`preventDefault()` on an event that causes the scroll.

There are many ways to initiate a scroll, so it’s more reliable to use CSS, `overflow` property.