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

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

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

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

Annotation Removed Event

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

Key Events

// 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

// 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:

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.

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

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

API Documentation

Event Listening

TypeScript Signatures

Event Data Map

Examples

Page Change

Redaction and Annotation Events

Redaction Create Event

Annotation Removed Event

Key Events

Pointer Events

Listening for Multiple Key Presses

Removing Event Listeners

​TypeScript Signatures

​Event Data Map

​Examples

​Page Change

​Redaction and Annotation Events

​Redaction Create Event

​Annotation Removed Event

​Key Events

​Pointer Events

​Listening for Multiple Key Presses

​Removing Event Listeners

TypeScript Signatures

Event Data Map

Examples

Page Change

Redaction and Annotation Events

Redaction Create Event

Annotation Removed Event

Key Events

Pointer Events

Listening for Multiple Key Presses

Removing Event Listeners