Skip to main content
MuPDF WebViewer can listen for the following events:
Event TypeDescription
ACTION_HISTORY_CHANGEWhen an action causes the history to change
ANNOTATION_CREATEA new annotation is created
ANNOTATION_MODIFYAn existing annotation is modified
ANNOTATION_REMOVEAn existing annotation is deleted
ANNOTATION_SELECTION_CHANGEAnother annotation is selected
ANNOTATION_TOOL_CHANGEA different annotation tool type is selected
CURRENT_PAGE_INDEX_CHANGEThe current page index changes
CURRENT_READING_PAGE_CHANGEThe current reading page changes
DOCUMENT_DOWNLOADA document download is initiated
KEYDOWNA key is pressed down
KEYUPA key is released
MOUSEDOWNA mouse button is pressed down
MOUSEUPA mouse button is released
POINTERDOWNFires for all pointer down devices: mouse, touch, stylus/pen, etc.
POINTERUPFires for all pointer up devices: mouse, touch, stylus/pen, etc.
REDACTION_CREATEA new redaction is created
REDACTION_MODIFYAn existing redaction is modified
REDACTION_REMOVEAn existing redaction is removed
SCALE_CHANGEThe document scale changes
SCROLL_POSITION_CHANGEThe document is scrolled
SIDE_VIEW_CLOSEThe side view is closed
SIDE_VIEW_OPENThe side view is opened
TEXT_SEARCH_STARTA text search is started
TEXT_SELECTION_CHANGEThe 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 Typeevent.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_CHANGEundefined

​
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);