Events

Index

• click
• closeNode
• clusterDidChange
• clusterWillChange
• contentDidUpdate
• contentWillUpdate
• doubleClick
• keyDown
• keyUp
• openNode
• selectNode
• willCloseNode
• willOpenNode
• willSelectNode

---

click

The click event is fired on mouse click.

Since

1.2.0

Example

Event delegation: ^{[1, 2]}

tree.on('click', function(event) {
    var target = event.target || event.srcElement; // IE8
    var nodeTarget = target;

    while (nodeTarget && nodeTarget.parentElement !== tree.contentElement) {
        nodeTarget = nodeTarget.parentElement;
    }

    // Call event.stopPropagation() if you want to prevent the execution of
    // default tree operations like selectNode, openNode, and closeNode.
    event.stopPropagation();

    // Matches the specified group of selectors.
    var selectors = '.dropdown .btn';
    if (nodeTarget.querySelector(selectors) !== target) {
        return;
    }

    // do stuff with the target element.
    console.log(target);
});

Event delegation with jQuery:

var el = document.querySelector('#tree');
var tree = new InfiniteTree(el, { /* options */ });

$(tree.contentElement).on('click', '.dropdown .btn', function(event) {
    // Call event.stopPropagation() if you want to prevent the execution of
    // default tree operations like selectNode, openNode, and closeNode.
    event.stopPropagation();

    // do stuff with the target element.
    console.log(event.target);
});

closeNode

Fired when a node is closed.

Since

0.2.0

Example

tree.on('closeNode', function(node) {
    console.log(node);
    // → Node {}
});

clusterDidChange

Triggered when the clusters were changed.

Since

1.3.0

Example

tree.on('clusterDidChange', function() {
});

clusterWillChange

Triggered before updating clusters.

Since

1.3.0

Example

tree.on('clusterWillChange', function() {
});

contentDidUpdate

Triggered when the tree is updated.

Since

0.9.0

Example

tree.on('contentDidUpdate', function() {
});

contentWillUpdate

Triggered before updating the tree.

Since

0.9.0

Example

tree.on('contentWillUpdate', function() {
});

doubleClick

Triggered when the mouse dblclick event is fired.

Since

1.7.0

Example

tree.on('doubleClick', function(event) {
});

keyDown

Triggered when the keydown event is fired.

Since

1.8.0

Example

tree.on('keyDown', function(event) {
    // Prevent the default scroll
     event.preventDefault();

     const node = tree.getSelectedNode();
     const nodeIndex = tree.getSelectedIndex();

     if (event.keyCode === 37) { // Left
         tree.closeNode(node);
     } else if (event.keyCode === 38) { // Up
         const prevNode = tree.nodes[nodeIndex - 1] || node;
         tree.selectNode(prevNode);
     } else if (event.keyCode === 39) { // Right
         tree.openNode(node);
     } else if (event.keyCode === 40) { // Down
         const nextNode = tree.nodes[nodeIndex + 1] || node;
         tree.selectNode(nextNode);
     }
});

keyUp

Triggered when the keyup event is fired.

Since

1.8.0

Example

tree.on('keyUp', function(event) {
});

openNode

Fired when a node is opened.

Since

0.2.0

Example

tree.on('openNode', function(node) {
    console.log(node);
    // → Node {}
});

selectNode

Fired when a node is selected or deselected.

Since

0.2.0

Example

tree.on('selectNode', function(node) {
    console.log(node);
    // → Node {} (The selected node)
    // → null (No nodes selected)
});

willCloseNode

Fired before closing a node.

Since

1.11.0

Example

tree.on('willCloseNode', function(node) {
    console.log(node);
    // → Node {}
});

willOpenNode

Fired before opening a node.

Since

1.11.0

Example

tree.on('willOpenNode', function(node) {
    console.log(node);
    // → Node {}
});

willSelectNode

Fired before selecting or deselecting a node.

Since

1.11.0

Example

tree.on('willSelectNode', function(node) {
    console.log(node);
    // → Node {}
    // → null (No nodes selected)
});