I am trying to understand the difference between events (onclick, onfocus, etc...) that exist in a control's "all properties" tab and the same events in the event handler of a control.
When trying to add client or server code in an "all properties onclick" it is executed on page load before i even try to do anything... (same for onfocus, onkeydown etc, they are all executed on page load immediately).
Any explanation? (or link with expanation) (of course i always work with event handlers and i am ok with it but...i am just wondering.)
Basically, events you have added into the component properties are the native events of the HTML component. You can only run client-side javascript here.
<input type="text" onchange="doStuff()" class="xspInputFieldEditBox" name="view:_id1:inputText1" id="view:_id1:inputText1">
Events added into an eventHandler
are binded events. XPages has an eventHandler renderer which creates a javascript function and attach that into the component via XSP.attachEvent
method on load.
Event handler also provides multiple CSJS events in an order. Therefore you might stop the rest of the code simply by returning false. For instance:
<xp:eventHandler
event="onchange"
submit="false">
<xp:this.script>
<xp:scriptGroup>
<xp:executeClientScript
script="if(! confirm('Confirm the next action?')) return false;"></xp:executeClientScript>
<xp:executeClientScript
script="doStuff();"></xp:executeClientScript>
</xp:scriptGroup>
</xp:this.script>
</xp:eventHandler>
This script group will stop if the user clicks cancel on the confirm dialog.
This event mechanism has additional functionality. It can create a GET/POST ajax request back to the server (serverside code through a managed bean or SSJS) and partial/full refresh on the page in addition to the control over validation, partial execution, etc.