Adding events 2: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
No edit summary |
||
| Line 2: | Line 2: | ||
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. | 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": | |||
<source lang="javascript"> | <source lang="javascript"> | ||
var p = board.create('point',[1,1]); | var p = board.create('point',[1,1]); | ||
| Line 9: | Line 9: | ||
The possible events are | The possible events are | ||
* update | * update | ||
* drag, mousedrag, touchdrag | * drag, mousedrag, touchdrag | ||
* move, mousemove, touchmove | * move, mousemove, touchmove | ||
Revision as of 08:02, 26 October 2012
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"> </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 = ' ';
});
