> ## Documentation Index
> Fetch the complete documentation index at: https://webviewer-docs.mupdf.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Event Listening

**MuPDF WebViewer** can listen for the following events:

| Event Type                    | Description                                                        |
| ----------------------------- | ------------------------------------------------------------------ |
| `ACTION_HISTORY_CHANGE`       | When an action causes the history to change                        |
| `ANNOTATION_CREATE`           | A new annotation is created                                        |
| `ANNOTATION_MODIFY`           | An existing annotation is modified                                 |
| `ANNOTATION_REMOVE`           | An existing annotation is deleted                                  |
| `ANNOTATION_SELECTION_CHANGE` | Another annotation is selected                                     |
| `ANNOTATION_TOOL_CHANGE`      | A different annotation tool type is selected                       |
| `CURRENT_PAGE_INDEX_CHANGE`   | The current page index changes                                     |
| `CURRENT_READING_PAGE_CHANGE` | The current reading page changes                                   |
| `DOCUMENT_DOWNLOAD`           | A document download is initiated                                   |
| `KEYDOWN`                     | A key is pressed down                                              |
| `KEYUP`                       | A key is released                                                  |
| `MOUSEDOWN`                   | A mouse button is pressed down                                     |
| `MOUSEUP`                     | A mouse button is released                                         |
| `POINTERDOWN`                 | Fires for all pointer down devices: mouse, touch, stylus/pen, etc. |
| `POINTERUP`                   | Fires for all pointer up devices: mouse, touch, stylus/pen, etc.   |
| `REDACTION_CREATE`            | A new redaction is created                                         |
| `REDACTION_MODIFY`            | An existing redaction is modified                                  |
| `REDACTION_REMOVE`            | An existing redaction is removed                                   |
| `SCALE_CHANGE`                | The document scale changes                                         |
| `SCROLL_POSITION_CHANGE`      | The document is scrolled                                           |
| `SIDE_VIEW_CLOSE`             | The side view is closed                                            |
| `SIDE_VIEW_OPEN`              | The side view is opened                                            |
| `TEXT_SEARCH_START`           | A text search is started                                           |
| `TEXT_SELECTION_CHANGE`       | The text selection changes                                         |

In order to register a listener just use the `webViewer.addEventListener` method.

## TypeScript Signatures

```typescript theme={null}
addEventListener<T extends keyof EventDataMap>(
  type: T, 
  callback: (event: { type: T; data: EventDataMap[T] }) => void
): void;

removeEventListener<T extends keyof EventDataMap>(
  type: T,
  callback: (event: { type: T; data: EventDataMap[T] }) => void
): void;
```

## Event Data Map

`event.data` payloads by event type:

| Event Type                    | `event.data` type                                                |
| ----------------------------- | ---------------------------------------------------------------- |
| `SCALE_CHANGE`                | `{ scale: number }`                                              |
| `ANNOTATION_TOOL_CHANGE`      | `{ tool: AnnotType \| WidgetType }`                              |
| `CURRENT_PAGE_INDEX_CHANGE`   | `{ currentPageIndex: number }`                                   |
| `DOCUMENT_DOWNLOAD`           | `{}`                                                             |
| `SIDE_VIEW_OPEN`              | `{ type: PanelSide }`                                            |
| `SIDE_VIEW_CLOSE`             | `{ type: PanelSide }`                                            |
| `KEYDOWN`                     | `{ event: KeyboardEvent }`                                       |
| `KEYUP`                       | `{ event: KeyboardEvent }`                                       |
| `SCROLL_POSITION_CHANGE`      | `{ position: 'top' \| 'bottom' \| 'topover' \| 'bottomover' }`   |
| `CURRENT_READING_PAGE_CHANGE` | `{ pageInfo: { pageIndex: number }[] }`                          |
| `MOUSEDOWN`                   | `{ event: MouseEvent }`                                          |
| `MOUSEUP`                     | `{ event: MouseEvent }`                                          |
| `POINTERDOWN`                 | `{ event: PointerEvent }`                                        |
| `POINTERUP`                   | `{ event: PointerEvent }`                                        |
| `ANNOTATION_CREATE`           | `{ annotation: Annotation }`                                     |
| `ANNOTATION_MODIFY`           | `{ annotation: Annotation }`                                     |
| `ANNOTATION_REMOVE`           | `{ annotation: Annotation }`                                     |
| `REDACTION_CREATE`            | `{ redaction: Annotation }`                                      |
| `REDACTION_MODIFY`            | `{ redaction: Annotation }`                                      |
| `REDACTION_REMOVE`            | `{ redaction: Annotation }`                                      |
| `TEXT_SEARCH_START`           | `{ keyword: string; caseSensitive: boolean; useRegex: boolean }` |
| `ACTION_HISTORY_CHANGE`       | `{ availUndoCount: number; availRedoCount: number }`             |
| `ANNOTATION_SELECTION_CHANGE` | `{ annotations: Annotation[] }`                                  |
| `TEXT_SELECTION_CHANGE`       | `undefined`                                                      |

# Examples

## Page Change

```javascript theme={null}
webViewer.addEventListener(webViewer.refs.event.type.CURRENT_PAGE_INDEX_CHANGE, (e) => {
  console.log(Object.keys(e.data));
  console.log(e.data.currentPageIndex);
});
```

## Redaction and Annotation Events

### Redaction Create Event

```javascript theme={null}
webViewer.addEventListener(webViewer.refs.event.type.REDACTION_CREATE, (e) => {
    console.log("REDACTION_CREATE");
});
```

### Annotation Removed Event

```javascript theme={null}
webViewer.addEventListener(webViewer.refs.event.type.ANNOTATION_REMOVE, (e) => {
    console.log("ANNOTATION_REMOVE");
});
```

## Key Events

```javascript theme={null}
// Listen for a key down
webViewer.addEventListener(webViewer.refs.event.type.KEYDOWN, keyDown);

function keyDown(e) {

    console.log(Object.keys(e.data));
    
    for (var i in e.data) {
        console.log(e.data[i]);
    }

    console.log("Keycode="+e.data.event.keyCode);
}
```

## Pointer Events

```javascript theme={null}
// Listen for a pointer down
webViewer.addEventListener(webViewer.refs.event.type.POINTERDOWN, pointerDown);

function pointerDown(e) {

    console.log(Object.keys(e.data));

    for (var i in e.data) {
        console.log(e.data[i]);
    }

    console.log("clientX="+e.data.event.clientX);
}
```

## Listening for Multiple Key Presses

For example, if you would like to add a shortcut for `ctrl+s` to save a document you could do the following to register for multiple key presses:

```javascript theme={null}
webViewer.addEventListener(webViewer.refs.event.type.KEYDOWN, (event) => {
  if (event.data.event.ctrlKey && event.data.event.key === 's') {
    webViewer.document.download();
  }
});
```

## Removing Event Listeners

Event listeners can be removed using the `webViewer.removeEventListener` method. You need to pass in the same function reference that was used to add the event listener.

```javascript theme={null}
function keyDown(e) {   
    console.log("Keycode="+e.data.event.keyCode);
}

webViewer.removeEventListener(webViewer.refs.event.type.KEYDOWN, keyDown);
```