Difference between revisions of "Adding events 2"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
|||
Line 1: | Line 1: | ||
+ | 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. | ||
+ | |||
+ | An user-supplied event handler can be defined by the method "on": | ||
+ | <source lang="javascript"> | ||
+ | var p = board.create('point',[1,1]); | ||
+ | p.on('update', function(){ /* do something ... */); | ||
+ | </source> | ||
+ | The possible events ar | ||
+ | * update | ||
+ | * hit, mousehit | ||
+ | * drag, mousedrag, touchdrag | ||
+ | * move, mousemove, touchmove | ||
+ | * over, mouseover | ||
+ | * out, mouseout | ||
+ | * up, mouseup, touchend | ||
+ | * down, mousedown, touchstart | ||
+ | |||
<html> | <html> | ||
<p id="myOutput"> </p> | <p id="myOutput"> </p> |
Revision as of 08:41, 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.
An 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 ar
- update
- hit, mousehit
- 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 = ' ';
});