jointjs/docs/src/joint/api/dia/Element/events.html

JavaScript diagramming library

<p>The following list contains events that you can react on:</p>

<ul>
    <li><code>change</code> - generic event triggered for any change on the element - <i>fn(element, opt)</i></li>
    <li><code>change:position</code> - triggered when the element changes its position - <i>fn(element, newPosition, opt)</i></li>
    <li><code>change:angle</code> - triggered when the element gets rotated - <i>fn(element, newAngle, opt)</i></li>
    <li><code>change:size</code> - triggered when the element gets resized - <i>fn(element, newSize, opt)</i></li>
    <li><code>change:attrs</code> - triggered when the element changes its attributes - <i>fn(element, newAttrs, opt)</i></li>
    <li><code>change:embeds</code> - triggered when other cells were embedded into the element - <i>fn(element, newEmbeds, opt)</i></li>
    <li><code>change:parent</code> - triggered when the element got embedded into another element - <i>fn(element, newParent, opt)</i></li>
    <li><code>change:z</code> - triggered when the element is moved in the z-level (<a href="#dia.Element.prototype.toFront">toFront</a> and <a href="#dia.Element.prototype.toBack">toBack</a>) - <i>fn(element, newZ, opt)</i></li>
    <li><code>transition:start</code> - triggered when a transition starts. - <i>fn(element, pathToAttribute)</i></li>
    <li><code>transition:end</code> - triggered when a transiton ends. - <i>fn(element, pathToAttribute)</i></li>
</ul>

<pre><code>// Listening for changes of the position to a single element
element1.on('change:position', function(element1, position) {
  alert('element1 moved to ' + position.x + ',' + position.y);
});
// All elements events are also propagated to the graph.
graph.on('change:position', function(element, position) {
  console.log('Element ' + element.id + 'moved to ' + position.x + ',' + position.y);
});
// Using the option parameter and a custom attribute
graph.on('change:custom', function(element, custom, opt) {
  if (opt.consoleOutput) {
    console.log('Custom attribute value changed to "' + custom + '"');
  }
});
element2.prop('custom', 'myValue', { consoleOutput: true });</code></pre>