Adding event handlers to a JSF component

Many Faces components have events associated with them. For example, a Button - Command component has events such as onclick and onmousedown associated with it. Using the Quick Edit view for a selected Faces component, you can define actions for specific events.

1. Create a JSF enabled dynamic Web project.

2. Create a JSF page.

3. Add a JSF component to the page. For more information about adding JSF components, refer to Adding JSF components to Web pages.

To add an event handler to a JSF component:

1. Right-click the JSF component to which you want to add an event handler and select

   Edit Events. The Quick Edit view opens.

2. Click an event from the event list. After selecting an event from the event list, you can add a script for that event in one of the following ways:

   • Enter the script directly into the script editor.

   • Right-click the script editor and select

     Insert Snippet then select a script from the list in the pop-up menu.

   • Click

     Use pre-defined behavior then specify the

     Action and the

     Target.

   • Drag a snippet from the Snippets view into the script editor.

Table 1. Common events for JSF components.

The following events are common to most JSF components. For more information about events that are specific to a particular component, refer to the component reference topics in the Help.

Event	Description
onblur	JavaScript™ event handler invoked when the component loses focus.
onclick	JavaScript event handler invoked if a mouse button is clicked while the mouse pointer is over the component. Fires after the individual mousedown and mouseup events. Should not fire if the mouse pointer is moved such that the release of the button occurs while the pointer is outside the component.
ondblclick	JavaScript event handler invoked if a mouse button is clicked twice while the mouse pointer is over the component. Fires after the individual mousedown and mouseup events. The click event should not be fired in this case.
onfocus	JavaScript event handler invoked when the component receives focus.
onkeydown	JavaScript event handler invoked when a keyboard key is pressed down.
onkeypress	JavaScript event handler invoked when a character is formed as the result of pressing a keyboard key. Browsers differ as to whether the event is fired when a "function" or "control" key pressed.
onkeyup	JavaScript event handler invoked when a keyboard key is released.
onmousedown	JavaScript event handler invoked if a mouse button is pressed down while the mouse pointer is over the component.
onmousemove	JavaScript event handler invoked each time the mouse pointer is moved while over a component. Browsers differ in regard to the granularity of a what constitutes a move, although the event should fire each time the pointer is moved at least one pixel.
onmouseout	JavaScript event handler invoked when the mouse pointer is outside (away from) a component. A mouseover event should have been fired before this event.
onmouseover	JavaScript event handler invoked when the mouse pointer is initially moved over a component.
onmouseup	JavaScript event handler invoked if a mouse button is released down while the mouse pointer is over the component.

---