Adding events 2

It is possible to supply user-defined defined functions for certain events. The user-defined functions are called additionally to the default JSXGraph events. For the events "down" and "up" the user-supplied event handlers are called before the default JSXGraph event handler. For the event "update" the user-supplied handler is called after the default JSXGraph event handler which is an update of the board.

A user-supplied event handler can be defined by the method "on":

   var p = board.create('point',[1,1]);
   p.on('update', function(){ /* do something ... */);

The possible events are

• update
• drag, mousedrag, touchdrag
• move, mousemove, touchmove
• over, mouseover
• out, mouseout
• up, mouseup, touchend
• down, mousedown, touchstart

 

<p id="myOutput">&nbsp;</p>

var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-4,4,4,-4], keepaspectratio:true});
var myPoint = brd.create('point',[1,1], {size:5, fixed: true});
myPoint.on('over', function(){
    document.getElementById('myOutput').innerHTML = "Point "+this.name;
});
myPoint.on('out', function(){
    document.getElementById('myOutput').innerHTML = ' ';
});

var myPoint2 = brd.create('point',[-1,1], {size:5});
myPoint2.on('over', function(){
    document.getElementById('myOutput').innerHTML = "Point "+this.name;
});
myPoint2.on('out', function(){
    document.getElementById('myOutput').innerHTML = ' ';
});