This example demonstrates the straight forward event listening mechanism in ZK.
The textboxes are registered with the onFocus and onBlur events such that the changeStyle method is called whenever the two events are triggered, which highlights the text label in light blue. The demo also shows how buttons in the configuration can be delegated to trigger the textboxes' focus event.

<zk>
	<hlayout id="h1" valign="bottom">
		<label id="t1" value="Text1: " />
		<textbox id="text1" onBlur="changeStyle(h1)" onFocus="changeStyle(h1)" />
	</hlayout>
	<hlayout id="h2" valign="bottom">
		<label id="t2" value="Text2: " />
		<textbox id="text2" onBlur="changeStyle(h2)" onFocus="changeStyle(h2)" />
	</hlayout>
</zk>

<zk>
	<style>
		.focus .z-label {
			color: #029CCC;
		}
	</style>
	<zscript><![CDATA[
		void changeStyle(Component h) {
			h.sclass = "focus".equals(h.sclass)? "" : "focus";
		}
	]]></zscript>
	<vlayout>
		<button label="Focus on Text1" onClick="text1.focus();" />
		<button label="Focus on Text2" onClick="text2.focus();" />
	</vlayout>
</zk>