The following list contains events that you can react on in a paper:

pointerdblclick

Triggered when pointer is double-clicked on a target (a `dblclick` event is detected).

The callback function is passed `cellView`, `evt`, `x` and `y` as arguments.

cell:pointerdblclick | Triggered when pointer is double-clicked on a cell.
link:pointerdblclick | Triggered when pointer is double-clicked on a link.
element:pointerdblclick | Triggered when pointer is double-clicked on an element.
blank:pointerdblclick | Triggered when pointer is double-clicked on the paper outside any cell. The callback function is passed `evt`, `x` and `y` as arguments.

pointerclick

Triggered when pointer is clicked on a target without pointer movement (a `click` or `touchend` event is detected). Occurs alongside `pointerdown` and `pointerup` events.

The callback function is passed `cellView`, `evt`, `x` and `y` as arguments.

cell:pointerclick | Triggered when pointer is clicked on a cell.
link:pointerclick | Triggered when pointer is clicked on a link.
element:pointerclick | Triggered when pointer is clicked on an element.
blank:pointerclick | Triggered when pointer is clicked on the paper outside any cell. The callback function is passed `evt`, `x` and `y` as arguments.

contextmenu

Triggered when pointer is right-clicked on a target (a `contextmenu` event is detected).

The callback function is passed `cellView`, `evt`, `x` and `y` as arguments.

cell:contextmenu | Triggered when pointer is right-clicked on a cell.
link:contextmenu | Triggered when pointer is right-clicked on a link.
element:contextmenu | Triggered when pointer is right-clicked on an element.
blank:contextmenu | Triggered when pointer is right-clicked on the paper outside any cell. The callback function is passed `evt`, `x` and `y` as arguments.

pointerdown

Triggered when pointer is pressed down on a target (a `mousedown` or `touchstart` event is detected). The paper also starts delegating respective `pointermove` and `pointerup` events (including their touch counterparts; see below).

The callback function is passed `cellView`, `evt`, `x` and `y` as arguments.

cell:pointerdown | Triggered when pointer is pressed down on a cell.
link:pointerdown | Triggered when pointer is pressed down on a link.
element:pointerdown | Triggered when pointer is pressed down on an element.
blank:pointerdown | Triggered when pointer is pressed down on the paper outside any cell. The callback function is passed `evt`, `x` and `y` as arguments.

pointermove

Triggered when pointer is moved over a target while pressed down (a `mousemove` or `touchmove` event is detected).

The callback function is passed `cellView`, `evt`, `x` and `y` as arguments.

cell:pointermove | Triggered when pointer is moved over a cell.
link:pointermove | Triggered when pointer is moved over a link.
element:pointermove | Triggered when pointer is moved over an element.
blank:pointermove | Triggered when pointer is moved over the paper outside any cell. The callback function is passed `evt`, `x` and `y` as arguments.

pointerup

Triggered when pointer is released on a target after being pressed down (a `mouseup` or `touchend` event is detected).

The callback function is passed `cellView`, `evt`, `x` and `y` as arguments.

cell:pointerup | Triggered when pointer is released on a cell.
link:pointerup | Triggered when pointer is relased on a link.
element:pointerup | Triggered when pointer is released on an element.
blank:pointerup | Triggered when pointer is released on the paper outside any cell. The callback function is passed `evt`, `x` and `y` as arguments.

Calling `evt.stopPropagation()` prevents triggering a subsequent `pointerclick` event.

mouseover

Triggered when pointer begins to hover directly over a target.

The callback function is passed `cellView` and `evt` as arguments.

cell:mouseover | Triggered when pointer begins to hover directly over a cell.
link:mouseover | Triggered when pointer begins to hover directly over a link.
element:mouseover | Triggered when pointer begins to hover directly over an element.
blank:mouseover | Triggered when pointer begins to hover over the `svg` element of the paper outside any cell. The callback function is passed `evt` as argument.

mouseout

Triggered when pointer ceases to hover directly over a target.

The callback function is passed `cellView` and `evt` as arguments.

cell:mouseout | Triggered when pointer ceases to hover directly over a cell.
link:mouseout | Triggered when pointer ceases to hover directly over a link.
element:mouseout | Triggered when pointer ceases to hover directly over an element.
blank:mouseout | Triggered when pointer ceases to hover over the `svg` element of the paper outside any cell. The callback function is passed `evt` as argument.

mouseenter

Triggered when pointer enters the area above a target.

The callback function is passed `cellView` and `evt` as arguments.

cell:mouseenter | Triggered when pointer enters the area above a cell.
link:mouseenter | Triggered when pointer enters the area above a link.
element:mouseenter | Triggered when pointer enters the area above an element.
paper:mouseenter | Triggered when pointer enters the area of the paper (including paper border, if present). The callback function is passed `evt` as argument.

mouseleave

Triggered when pointer leaves the area above a target.

The callback function is passed `cellView` and `evt` as arguments.

cell:mouseleave | Triggered when pointer leaves the area above a cell.
link:mouseleave | Triggered when pointer leaves the area above a link.
element:mouseleave | Triggered when pointer leaves the area above an element.
paper:mouseleave | Triggered when pointer leaves the area of the paper (including paper border, if present). The callback function is passed `evt` as argument.

mousewheel

Triggered when mouse wheel is rotated while pointer is on a target.

The callback function is passed `cellView`, `evt`, `x`, `y` and `delta` as arguments.

cell:mousewheel | Triggered when mouse wheel is rotated while the pointer is on a cell.
link:mousewheel | Triggered when mouse wheel is rotated while the pointer is on a link.
element:mousewheel | Triggered when mouse wheel is rotated while the pointer is on an element.
blank:mousewheel | Triggered when mouse wheel is rotated while the pointer is on the paper outside any cell. The callback function is passed `evt`, `x`, `y` and `delta` as arguments.

magnet

Triggered when interacting with a magnet target.

The callback function is passed `elementView`, `evt`, `magnetSVGElement`, `x`, `y` as arguments.

element:magnet:pointerclick | Triggered when pointer is clicked on an element magnet and no link was created yet from this magnet (controlled by magnetThreshold option). Calling `evt.stopPropagation()` prevents triggering `cell:pointerclick` and `element:pointerclick` events.
element:magnet:pointerdblclick | Triggered when pointer is double-clicked on an element magnet. Calling `evt.stopPropagation()` prevents triggering `cell:pointerdblclick` and `element:pointerdblclick` events.
element:magnet:contextmenu | Triggered when pointer is right-clicked on an element magnet. Calling `evt.stopPropagation()` prevents triggering `cell:contextmenu` and `element:contextmenu` events. |

cell:highlight

Triggered when the `cellView.highlight` method is called on a link or element view.

The callback function is invoked with the following arguments:

- cellView - highlighted CellView
- node - highlighted node (SVGElement) of the CellView
- options - options used when `cellView.highlight(node, options)` was called. The `type` property is added to the option object and specifies what type of highlighting interactions caused the highlight.

    // Disable built-in highlighting
    paper.options.highlighting = false;
    // Handle each type of the highlight manually
    paper.on('cell:highlight', (cellView, node, options) => {
      switch (options.type) {
        case: joint.dia.CellView.Highlighting.CONNECTING: {
          joint.highlighters.stroke.add(cellView, node, 'id1', { attrs: { 'stroke': 'blue' }});
          break;
        }
        case: joint.dia.CellView.Highlighting.EMBEDDING: {
          joint.highlighters.stroke.add(cellView, node, 'id2', { attrs: { 'stroke': 'red' }});
          break;
        }
        default: {
          joint.highlighters.stroke.add(cellView, node, 'id3');
          break;
        }
      }
    });

cell:unhighlight

Triggered when the `cellView.unhighlight` method is called on a link or element view.

The callback function is invoked with the following arguments:

- cellView - highlighted CellView
- node - highlighted node (SVGElement) of the CellView
- options - options used when `cellView.unhighlight(node, options)` was called. The `type` property is added to the option object and specifies what type of highlighting interactions caused the unhighlight.

    // Disable built-in highlighting
    paper.options.highlighting = false;
    // Handle each type of the highlight manually
    paper.on('cell:unhighlight', (cellView, _node, options) => {
      switch (options.type) {
        case: joint.dia.CellView.Highlighting.CONNECTING: {
          joint.dia.Highlighter.remove(cellView, 'id1');
          break;
        }
        case: joint.dia.CellView.Highlighting.EMBEDDING: {
          joint.dia.Highlighter.remove(cellView, 'id2');
          break;
        }
        default: {
          joint.dia.Highlighter.remove(cellView, 'id3');
          break;
        }
      }
    });

cell:highlight:invalid

Triggered when a highlighter makes an attempt to highlight a node, that doesn't exist on the CellView (e.g. a port was highlighted and now it is removed).

The callback function is passed `cellView`, `highlighterId` and `highlighter` as arguments.

    paper.on('cell:highlight:invalid', (cellView, id) => {
      // Remove the invalid highlighter
      joint.dia.HighlighterView.remove(cellView, id);
    });
    element1.addPort({ id: 'port1' });
    const elementView1 = element1.findView(paper);
    const highlighter1 = joint.highlighters.mask.add(elementView1, { port: 'port1' }, 'highlighter-id'));
    // The following line will trigger the event with (elementView1, 'highlighter-id', highlighter1) arguments.
    element1.removePorts();

link:connect | Triggered when a link is connected to a cell. The event is triggered after the user reconnects a link. The callback function is passed `linkView`, `evt`, `elementViewConnected`, `magnet` and `arrowhead` as arguments.
link:disconnect | Triggered when a link is disconnected from a cell. The event is triggered after the user reconnects a link. The callback function is passed `linkView`, `evt`, `elementViewDisconnected`, `magnet` and `arrowhead` as arguments.
link:snap:connect | Triggered when a link is connected to a cell. The event (or multiple events) can be triggered while the user is reconnecting a link and snapLinks option is enabled. The callback function is passed `linkView`, `evt`, `elementViewConnected`, `magnet` and `arrowhead` as arguments.
link:snap:disconnect | Triggered when a link is disconnected from a cell. The event (or multiple events) can be triggered while the user is reconnecting a link and snapLinks option is enabled. The callback function is passed `linkView`, `evt`, `elementViewDisconnected`, `magnet` and `arrowhead` as arguments.
render:done | Triggered when all scheduled updates are done (i.e. all scheduled batches have finished).
[custom] | Custom cell event can be triggered on pointerdown with Event attribute. Calling `evt.stopPropagation()` prevents triggering all subsequent events.

An example of a simple `blank:pointerdown` event listener:

    paper.on('blank:pointerdown', function(evt, x, y) {
      alert('pointerdown on a blank area in the paper.')
    })

Consecutive `pointerdown`, `pointermove` and `pointerup` events can share information through the `evt.data` object:

    // Create a new link by dragging
    paper.on({
      'blank:pointerdown': function(evt, x, y) {
        var link = new joint.dia.Link();
        link.set('source', { x: x, y: y });
        link.set('target', { x: x, y: y });
        link.addTo(this.model);
        evt.data = { link: link, x: x, y: y };
      },
      'blank:pointermove': function(evt, x, y) {
        evt.data.link.set('target', { x: x, y: y });
      },
      'blank:pointerup': function(evt) {
        var target = evt.data.link.get('target');
        if (evt.data.x === target.x && evt.data.y === target.y) {
            // remove zero-length links
            evt.data.link.remove();
        }
      }
    });