clientListener client listener

The clientListener tag is a declarative way to register a client-side listener script to be executed when a specific event type is fired. This tag will be ignored for any server-rendered components, as it is only supported by rich client components.

Before using the clientListener tag, be sure to look for any existing behavior tags which might eliminate the need for scripts. For example, the af:showPopupBehavior tag simplifies what it takes to display a popup.


This example will invoke the JavaScript method "showPopupFromAction" when the button is clicked and will then manually display a popup.

<af:resource type="javascript">
 * Shows a popup from an "action" type event.
 * @param {AdfActionEvent} actionEvent the event being handled
function showPopupFromAction(actionEvent)
  var eventSource = actionEvent.getSource();
  var popup = eventSource.findComponent("popup");
  popup.show({align:AdfRichPopup.ALIGN_AFTER_START, alignId:eventSource.getClientId()});

<af:popup id="popup" contentDelivery="immediate">
  <af:panelGroupLayout layout="vertical" inlineStyle="width: 300px;">
    <af:outputText value="Hello World."/>

<af:commandButton text="Click Me">
  <af:clientListener type="action" method="showPopupFromAction"/>

Event Types

The following table lists component family-specific event types:

Event Type Component Family Description
action Command Fires when user triggers the command component
dialog Dialog Fires when user clicks dialog OK/Cancel buttons
disclosure ShowDetail Fires when disclosure state is toggled
inlineFrameLoad inlineFrame Queued when the internal iframe fires its load event
load Document Fires when the document finishes loading
popupOpening Popup Fired prior to opening a popup
popupOpened Popup Fired after popup is opened
popupClosed Popup Fired after popup is closed
query Query Fired when a query action happens(when user clicks the search icon in quickQuery or the search button in the query component)
rowDisclosure Tree, TreeTable Fired row disclosure state is toggled
selection Table, Tree, TreeTable Fires when selection state changes
sort Table Fires when user sorts data
valueChange Input, Select* Fires when the value of an input control is changed

The following table lists input (mouse/keyboard) event types. These events are delivered for all components (though in some cases may be consumed or blocked by a specific component implementation):

Event Type Description
click Fires when the user clicks on the component
dblClick Fires when the user double clicks on the component
contextMenu Fires when the user clicks on the component using the right mouse button
mouseDown Fires when the user performs a mouse down on the component
mouseUp Fires when the user performs a mouse up on the component
mouseMove Fires when the user moves the mouse while over the component
mouseOver Fires when the mouse enters the component
mouseOut Fires when the mouse leaves the component
keyDown Fires when the user presses a key down while the component has focus
keyUp Fires when the user releases a key from being down while the component has focus
keyPress Fires when a successful key press occurs while the component has focus
focus Fires when the component gains keyboard focus
blur Fires when the component loses keyboard focus


Name Type Supports EL? Description
type String no the type of client-side component event to listener for
method String no the client-side javascript method to invoke when triggered by an event of the specified type type