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;
|
|
|
|
|
}
|
2021-07-16 16:41:58 +02:00
|
|
|
.eventForm {
|
|
|
|
|
float: left;
|
|
|
|
|
margin: 10px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
2021-12-05 00:39:20 +01:00
|
|
|
<body>
|
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
|
|
|
|
2021-12-05 00:39:20 +01:00
|
|
|
</html>
|
