M is midpoint dependent of A & B, event is triggered when x() coordinate passes vertical line. At this moment circle with center M & radius to point R is created. Also there is click event attached to point A which should randomly change color at every click. Try dragging point A so that M passes vertical line.

dg.js example code

		var canvas = dg.Canvas("testcanvas", { border: "1px solid #ccc"});
		var axes = dg.Axes([canvas.width() / 4, canvas.height() / 1.5]).hide(false);
		
		
		var p1 = dg.Point([1,1]).label("P").color("#00ff00");
		var p2 = dg.Point([2,2]).label("A").size(4);
		
		p2.addEvent('click', function() { 
			p2.color(dg.color.rand());
		});

		var p3 = dg.Point([3, 0]).label("R").size(6).color("#ff0000");
		dg.Line(p3, new dg.geom.Point([3,1]));
		var midpoint = dg.Midpoint(p1,p2).label("M");
		var flag = false;
		midpoint.addEvent('moved', 
			function() { 
				if(this.dg_object.x() >= 3) {
					
					if(flag == false) {
						//important! flag = true; before dg. call 
						flag = true;
						dg.Circle(midpoint, p3);
					}
					
				}					
			
		});
		
		dg.Line(p1 , p2);