Client-side Event Listening"

From Documentation
m (remove empty version history (via JWB))
 
(21 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{ZKComponentReferencePageHeader}}
+
{{ZKDevelopersReferencePageHeader}}
 
= Overview =
 
= Overview =
  
ZK allows applications to handle events at both server and client side. Handling events at the server side, as described in the previous sections, are more common, since the listeners can access the backend services directly. However, handling event at the client side improves the responsiveness. For example, it is better to be done with a client-side listener if you want to open the drop-down list when a comobox gains the focus.
+
ZK allows applications to handle events at both the server and client side. Handling events at the server side, as described in the previous sections, is more common, since the listeners can access the backend services directly. However, handling events at the client side improves the responsiveness. For example, it is better to be done with a client-side listener if you want to open the drop-down list when a combobox gains focus.
  
The rule of thumb is to use server-side listeners first since it is easier, and then improve the responsiveness of the critical part, if any, with the client-side listener.
+
A good rule of thumb is to use server-side listeners first since it is easier, and then improve the responsiveness of the critical part, if any, with the client-side listener.
  
= Declare a Client-side Listener in a ZUL Page =
+
For more information about handling events at the client, please refer to [[ZK Client-side Reference/General Control/Event Listening|ZK Client-side Reference: Event Listening]].
  
Declaring a client-side listener in a ZUL page is similar to declaring a server-side listener, except
 
  
# Use the client namespace, http://www.zkoss.org/2005/zk/client (aka., client)
 
# It is JavaScript
 
# Use <tt>this</tt> to reference to the target widget (while the event is referenced with <tt>event</tt>)
 
  
For example,
+
{{ZKDevelopersReferencePageFooter}}
 
 
<source lang="xml">
 
<combobox xmlns:w="client" w:onFocus="this.open()"/>
 
</source>
 
 
 
== The Relationship between Client and Server-side Event Listener ==
 
 
 
It is allowed to register both the client and server-side event listeners. They will be both invoked. Of course, the client-side listener is called first, and then the server-side listener. For example,
 
 
 
<source lang="xml">
 
<div>
 
  <combobox xmlns:w="client" w:onFocus="this.open()"
 
  onFocus='self.parent.appendChild(new Label("focus"))'/>
 
</div>
 
</source>
 
 
 
If you want to stop the event propagation such that the server won't receive the event, you could invoke <code>event.stop()</code>. For example, the server-side listener won't be invoked in the following example:
 
 
 
<source lang="xml">
 
<div>
 
  <combobox xmlns:w="client" w:onFocus="this.open(); event.stop();"
 
  onFocus='self.parent.appendChild(new Label("focus"))'/>
 
</div>
 
</source>
 
 
 
= Register a Client-side Listener in Client-Side JavaScript =
 
 
 
=Version History=
 
 
 
{| border='1px' | width="100%"
 
! Version !! Date !! Content
 
|-
 
| &nbsp;
 
| &nbsp;
 
| &nbsp;
 
|}
 
 
 
{{ZKComponentReferencePageFooter}}
 

Latest revision as of 04:33, 5 February 2024


Client-side Event Listening


Overview

ZK allows applications to handle events at both the server and client side. Handling events at the server side, as described in the previous sections, is more common, since the listeners can access the backend services directly. However, handling events at the client side improves the responsiveness. For example, it is better to be done with a client-side listener if you want to open the drop-down list when a combobox gains focus.

A good rule of thumb is to use server-side listeners first since it is easier, and then improve the responsiveness of the critical part, if any, with the client-side listener.

For more information about handling events at the client, please refer to ZK Client-side Reference: Event Listening.




Last Update : 2024/02/05

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.