2021-07-16 16:41:58 +02:00
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
|
|
|
|
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
2021-10-03 02:10:21 +02:00
|
|
|
|
2021-07-16 16:41:58 +02:00
|
|
|
<head>
|
2021-10-03 02:23:32 +02:00
|
|
|
<style>
|
|
|
|
|
th,
|
|
|
|
|
td {
|
|
|
|
|
border: 1px solid black;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
2021-07-16 16:41:58 +02:00
|
|
|
<script type="text/javascript">
|
|
|
|
|
web2d = {
|
|
|
|
|
peer: {}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
web2d.peer =
|
|
|
|
|
{
|
|
|
|
|
svg: {}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
web2d.peer.utils = {};
|
|
|
|
|
</script>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
.eventForm {
|
|
|
|
|
float: left;
|
|
|
|
|
margin: 10px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
|
function EventLogger(type, element) {
|
|
|
|
|
this._enable = false;
|
|
|
|
|
this._element = element;
|
|
|
|
|
this._type = type;
|
|
|
|
|
this._listener = function logger(event) {
|
2021-10-03 02:10:21 +02:00
|
|
|
var oldColor = element.getAttribute('fillColor');
|
|
|
|
|
element.setFill("yellow");
|
2021-10-03 02:23:32 +02:00
|
|
|
|
2021-10-03 02:10:21 +02:00
|
|
|
alert("Event on:" + element.getType() + ", Type:" + type);
|
|
|
|
|
element.setFill(oldColor);
|
2021-07-16 16:41:58 +02:00
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
EventLogger.prototype.changeState = function () {
|
|
|
|
|
this._enable = !this._enable;
|
|
|
|
|
if (this._enable) {
|
|
|
|
|
this._element.addEvent(this._type, this._listener);
|
|
|
|
|
} else {
|
|
|
|
|
this._element.removeEvent(this._type, this._listener);
|
|
|
|
|
}
|
|
|
|
|
return this._enable;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function MultipleEventHandler(type, element) {
|
|
|
|
|
this._listeners = [];
|
|
|
|
|
this._type = type;
|
|
|
|
|
this._element = element;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
MultipleEventHandler.prototype.registerOneListener = function () {
|
|
|
|
|
var count = this._listeners.length;
|
|
|
|
|
var listener = function (event) {
|
|
|
|
|
alert("Listener #:" + count);
|
|
|
|
|
};
|
|
|
|
|
this._listeners.push(listener);
|
|
|
|
|
this._element.addEvent(this._type, listener);
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
MultipleEventHandler.prototype.listenerCount = function () {
|
2021-10-03 02:10:21 +02:00
|
|
|
return this._listeners.length;
|
2021-07-16 16:41:58 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
MultipleEventHandler.prototype.unRegisterOneListener = function () {
|
|
|
|
|
if (this._listeners.length > 0) {
|
|
|
|
|
var listener = this._listeners.pop();
|
|
|
|
|
this._element.removeEvent(this._type, listener);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function initialize() {
|
|
|
|
|
web2d.Toolkit.init();
|
|
|
|
|
|
|
|
|
|
// Workspace with CoordOrigin(100,100);
|
|
|
|
|
var workspace = new web2d.Workspace();
|
|
|
|
|
workspace.setSize("150px", "150px");
|
|
|
|
|
workspace.setCoordSize(150, 150);
|
|
|
|
|
|
|
|
|
|
var bigElipse = new web2d.Elipse();
|
|
|
|
|
bigElipse.setSize(100, 100);
|
|
|
|
|
bigElipse.setPosition(75, 75);
|
|
|
|
|
workspace.append(bigElipse);
|
|
|
|
|
|
|
|
|
|
var smallElipse = new web2d.Elipse();
|
|
|
|
|
smallElipse.setSize(50, 50);
|
|
|
|
|
smallElipse.setPosition(75, 75);
|
|
|
|
|
smallElipse.setFill('red')
|
|
|
|
|
workspace.append(smallElipse);
|
|
|
|
|
|
|
|
|
|
wClickEventLogger = new EventLogger('click', workspace);
|
|
|
|
|
wMouseoverEventLogger = new EventLogger('mouseover', workspace);
|
|
|
|
|
wMouseoutEventLogger = new EventLogger('mouseout', workspace);
|
|
|
|
|
wMousemoveEventLogger = new EventLogger('mousemove', workspace);
|
|
|
|
|
wDblCickEventLogger = new EventLogger('dblclick', workspace);
|
|
|
|
|
|
|
|
|
|
esClickEventLogger = new EventLogger('click', smallElipse);
|
|
|
|
|
esMouseoverEventLogger = new EventLogger('mouseover', smallElipse);
|
|
|
|
|
esMouseoutEventLogger = new EventLogger('mouseout', smallElipse);
|
|
|
|
|
esMousemoveEventLogger = new EventLogger('mousemove', smallElipse);
|
|
|
|
|
esDblCickEventLogger = new EventLogger('dblclick', smallElipse);
|
|
|
|
|
|
|
|
|
|
ebClickEventLogger = new EventLogger('click', bigElipse);
|
|
|
|
|
ebMouseoverEventLogger = new EventLogger('mouseover', bigElipse);
|
|
|
|
|
ebMouseoutEventLogger = new EventLogger('mouseout', bigElipse);
|
|
|
|
|
ebousemoveEventLogger = new EventLogger('mousemove', bigElipse);
|
|
|
|
|
ebblCickEventLogger = new EventLogger('dblclick', bigElipse);
|
|
|
|
|
|
|
|
|
|
workspace.addItAsChildTo($('#workspaceContainer').first());
|
|
|
|
|
|
|
|
|
|
var mEventWorkspace = new web2d.Workspace();
|
|
|
|
|
mEventWorkspace.setSize("150px", "150px");
|
|
|
|
|
mEventWorkspace.setCoordSize(150, 150);
|
|
|
|
|
|
|
|
|
|
var elipse = new web2d.Elipse();
|
|
|
|
|
elipse.setSize(100, 100);
|
|
|
|
|
elipse.setPosition(75, 75);
|
|
|
|
|
elipse.setFill('blue')
|
|
|
|
|
mEventWorkspace.append(elipse);
|
|
|
|
|
|
|
|
|
|
mEventWorkspace.addItAsChildTo($('#workspaceMultipleEvents').first());
|
|
|
|
|
multipleHandler = new MultipleEventHandler('click', elipse);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body onload="initialize();">
|
2021-10-03 02:10:21 +02:00
|
|
|
<h1>Elements Event Handling</h1>
|
|
|
|
|
|
2021-10-03 02:23:32 +02:00
|
|
|
<table>
|
2021-10-03 02:10:21 +02:00
|
|
|
<colgroup style="width:80%;">
|
|
|
|
|
<col style="width:30%" />
|
|
|
|
|
<col style="width:60%" />
|
|
|
|
|
</colgroup>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
This examples shows the ability to attach listeners to handle several events.
|
|
|
|
|
In this example, you can attach different events to three elements: workspace, small elipse and the
|
|
|
|
|
big
|
|
|
|
|
elipse.
|
|
|
|
|
Events will follow the event bubbling behaviour.
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<div id="workspaceContainer" style="float:left;"></div>
|
|
|
|
|
|
|
|
|
|
<div class="eventForm">
|
|
|
|
|
<form action="">
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Workspace Events</legend>
|
|
|
|
|
<label>Click Event:
|
|
|
|
|
<input type="button" value="Register"
|
|
|
|
|
onclick="(!wClickEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
|
|
|
</label><br />
|
|
|
|
|
<label>Double Click Event:
|
|
|
|
|
<input type="button" value="Register"
|
|
|
|
|
onclick="(!wDblCickEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
|
|
|
</label><br />
|
|
|
|
|
<label>Mouse Over Event:
|
|
|
|
|
<input type="button" value="Register"
|
|
|
|
|
onclick="(!wMouseoverEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
|
|
|
</label><br />
|
|
|
|
|
<label>Mouse Out Event:
|
|
|
|
|
<input type="button" value="Register"
|
|
|
|
|
onclick="(!wMouseoutEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
|
|
|
</label><br />
|
|
|
|
|
<label>Mouse Move Event:
|
|
|
|
|
<input type="button" value="Register"
|
|
|
|
|
onclick="(!wMousemoveEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
|
|
|
</label>
|
|
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<form action="">
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Small Elipse Events</legend>
|
|
|
|
|
<label>Click Event:
|
|
|
|
|
<input type="button" value="Register"
|
|
|
|
|
onclick="(!esClickEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
|
|
|
</label><br />
|
|
|
|
|
<label>Double Click Event:
|
|
|
|
|
<input type="button" value="Register"
|
|
|
|
|
onclick="(!esDblCickEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
|
|
|
</label><br />
|
|
|
|
|
<label>Mouse Over Event:
|
|
|
|
|
<input type="button" value="Register"
|
|
|
|
|
onclick="(!esMouseoverEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
|
|
|
</label><br />
|
|
|
|
|
<label>Mouse Out Event:
|
|
|
|
|
<input type="button" value="Register"
|
|
|
|
|
onclick="(!esMouseoutEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
|
|
|
</label><br />
|
|
|
|
|
<label>Mouse Move Event:
|
|
|
|
|
<input type="button" value="Register"
|
|
|
|
|
onclick="(!esMousemoveEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
|
|
|
</label>
|
|
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<form action="">
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Big Elipse Events</legend>
|
|
|
|
|
<label>Click Event:
|
|
|
|
|
<input type="button" value="Register"
|
|
|
|
|
onclick="(!ebClickEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
|
|
|
</label><br />
|
|
|
|
|
<label>Double Click Event:
|
|
|
|
|
<input type="button" value="Register"
|
|
|
|
|
onclick="(!ebDblCickEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
|
|
|
</label><br />
|
|
|
|
|
<label>Mouse Over Event:
|
|
|
|
|
<input type="button" value="Register"
|
|
|
|
|
onclick="(!ebMouseoverEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
|
|
|
</label><br />
|
|
|
|
|
<label>Mouse Out Event:
|
|
|
|
|
<input type="button" value="Register"
|
|
|
|
|
onclick="(!ebMouseoutEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
|
|
|
</label><br />
|
|
|
|
|
<label>Mouse Move Event:
|
|
|
|
|
<input type="button" value="Register"
|
|
|
|
|
onclick="(!ebMousemoveEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
|
|
|
</label>
|
|
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Multiple listeners can be attached to an element to handle an event type.
|
|
|
|
|
In this example, multiple listeners can be registered to the elipse element to handle the click
|
|
|
|
|
event type.
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<div id="workspaceMultipleEvents" style="float:left;"></div>
|
|
|
|
|
|
|
|
|
|
<div class="eventForm">
|
|
|
|
|
<form action="">
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Elipse Click Events Listeners</legend>
|
|
|
|
|
<label>Registered Listeners #:
|
|
|
|
|
<input type="text" disabled="disabled" value="0" id="listenerCounter" maxlength="2"
|
|
|
|
|
size="2" />
|
|
|
|
|
</label>
|
|
|
|
|
<br />
|
|
|
|
|
<input type="button" value="Register Listener"
|
|
|
|
|
onclick="multipleHandler.registerOneListener();$('#listenerCounter').first().value=multipleHandler.listenerCount();" />
|
|
|
|
|
<input type="button" value="UnRegister Listener"
|
|
|
|
|
onclick="multipleHandler.unRegisterOneListener();$('#listenerCounter').first().value=multipleHandler.listenerCount();" />
|
|
|
|
|
</fieldset>
|
|
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
2021-07-16 16:41:58 +02:00
|
|
|
</body>
|
2021-10-03 02:10:21 +02:00
|
|
|
|
|
|
|
|
</html>
|
