Adding events 2 - Revision history

A WASSERMANN at 15:15, 24 March 2020

2020-03-24T15:15:00Z

← Older revision		Revision as of 15:15, 24 March 2020
Line 8:		Line 8:
	</source>		</source>
	The possible events are		The possible events are
	* update
	* drag, mousedrag, touchdrag		* drag, mousedrag, touchdrag
	* move, mousemove, touchmove		* move, mousemove, touchmove

A WASSERMANN at 20:33, 1 July 2019

2019-07-01T20:33:36Z

← Older revision		Revision as of 20:33, 1 July 2019
Line 5:		Line 5:
	<source lang="javascript">		<source lang="javascript">
	var p = board.create('point',[1,1]);		var p = board.create('point',[1,1]);
	p.on('update', function(){ /* do something ... */);		p.on('update', function(e, i){ /* do something ... */);
	</source>		</source>
	The possible events are		The possible events are
Line 22:		Line 22:
	var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-4,4,4,-4], keepaspectratio:true});		var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-4,4,4,-4], keepaspectratio:true});
	var myPoint = brd.create('point',[1,1], {size:5, fixed: true});		var myPoint = brd.create('point',[1,1], {size:5, fixed: true});
	myPoint.on('over', function(){		myPoint.on('over', function(e){
	document.getElementById('myOutput').innerHTML = "Point "+this.name;		document.getElementById('myOutput').innerHTML = "Point "+this.name;
	});		});
	myPoint.on('out', function(){		myPoint.on('out', function(e){
	document.getElementById('myOutput').innerHTML = ' ';		document.getElementById('myOutput').innerHTML = ' ';
	});		});

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

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

	[[Category:Examples]]		[[Category:Examples]]

Michael at 08:02, 26 October 2012

2012-10-26T08:02:50Z

← Older revision		Revision as of 08:02, 26 October 2012
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.

	An user-supplied event handler can be defined by the method "on":		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
	* hit, mousehit
	* drag, mousedrag, touchdrag		* drag, mousedrag, touchdrag
	* move, mousemove, touchmove		* move, mousemove, touchmove

A WASSERMANN at 07:41, 26 October 2012

2012-10-26T07:41:37Z

← Older revision		Revision as of 07:41, 26 October 2012
Line 7:		Line 7:
	p.on('update', function(){ /* do something ... */);		p.on('update', function(){ /* do something ... */);
	</source>		</source>
	The possible events ar		The possible events are
	* update		* update
	* hit, mousehit		* hit, mousehit

A WASSERMANN at 07:41, 26 October 2012

2012-10-26T07:41:20Z

← Older revision		Revision as of 07:41, 26 October 2012
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>

Michael at 07:10, 29 March 2012

2012-03-29T07:10:42Z

← Older revision		Revision as of 07:10, 29 March 2012
Line 1:		Line 1:
	~~Please note: This only works when the SVG or VML renderer is used. With the Canvas renderer the rendNode property is undefined.~~
	<html>		<html>
	<p id="myOutput"> </p>		<p id="myOutput"> </p>

Michael: Created page with "Please note: This only works when the SVG or VML renderer is used. With the Canvas renderer the rendNode property is undefined.

2012-03-29T07:05:01Z

Created page with "Please note: This only works when the SVG or VML renderer is used. With the Canvas renderer the rendNode property is undefined. <html> </html> <jsxgra..."

New page
Please note: This only works when the SVG or VML renderer is used. With the Canvas renderer the rendNode property is undefined.
<html>
 
</html>
<jsxgraph width="400" height="400">
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 = ' ';
});
</jsxgraph>

<source lang="html4strict">
 
</source>

<source lang="javascript">
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 = ' ';
});</source>

[[Category:Examples]]