Oracle Fusion Middleware Tag Reference for Oracle ADF Faces 12c (12.2.1.4.0) E81455-03

# <af:clientListener>

clientListener clientlistenerclient

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.

### Accessibility Guidelines

Using event types of mouseDown, mouseUp, mouseMove, mouseOver, and mouseOut can create a application that does not work for a keyboard only user. If you use one of these event types, make sure you provide alternate access to the same content for a keyboard only user.

Do not initiate a change in context, like showing a popup, on focus or blur event types. A change in context will make your application hard to use by a keyboard only user, and confusing for someone using a screen reader.

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) { actionEvent.cancel(); var eventSource = actionEvent.getSource(); var popup = eventSource.findComponent("popup"); popup.show({align:AdfRichPopup.ALIGN_AFTER_START, alignId:eventSource.getClientId()}); } </af:resource> <af:popup id="popup" contentDelivery="immediate"> <af:panelGroupLayout layout="vertical" inlineStyle="width: 300px;"> <af:outputText value="Hello World."/> </af:panelGroupLayout> </af:popup> <af:commandButton text="Click Me"> <af:clientListener type="action" method="showPopupFromAction"/> </af:commandButton>

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
propertyChange | All | Fired when a component property is changed
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
dateSelection | chooseDate, inputDate | af:chooseDate can be used to multi select dates. For this a client listener of type'dateSelection' should be used. For example, to register for date selection and load events, you can create a client listener for the chooseDate component. When a user selects a date in the date picker, the page should automatically set the default time value within the same picker. You can use the dateSelectionEventHandler method to set the default time value for the inputDate component, when a user selects a date. To receive date-selection notifications, you must first register a client listener for the dateSelection event.

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

## Attributes

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`