View Source

h2. Overview
_Since 4.0_

You can use the _icecore:jsEventListener_ component to capture Javascript events and then notify a server-side defined action listener.

{tip}See the ICEfaces Showcase [Live Demo|http://icefaces-showcase.icesoft.org/showcase.jsf?grp=aceMenu&exp=jsEventListenerBean] of this component, complete with source code.{tip}

h2. Getting Started

To use the _icecore:jsEventListener_ tag, first declare the core namespace:

{panel}
{code:html|borderStyle=dashed}
<html ... xmlns:icecore="http://www.icefaces.org/icefaces/core">
{code}
{panel}

Then add the tag to your page enclosing the components that might fire the events that you want to capture:

{panel}
{code:xml|borderStyle=dashed}
<h:body>
...
<icecore:jsEventListener events="onlclick, onkeypress" actionListener="#{Bean.captureEvent}">
....
<h:form>
<h:inputText .../>
<h:inputText .../>
....
....
<ace:autoCompleteEntry ..../>
</h:form>
....
</icecore:jsEventListener>
...
</h:body>
{code}
{panel}

Optionally a JavaScript function can be used to filter through the captured events. This can be very useful in cases where lots of events are fired repeatedelly, such as key presses or mouse overs.

{code:xml|borderStyle=dashed}
<h:head>
...
<script type="text/javascript">
function allowArrowKeys(event) {
var keycode = event.which || event.keyCode;
return keycode >= 37 && keycode <= 40;
}
</script>
</h:head>
<h:body>
...
<icecore:jsEventListener events="onkeypress" handler="allowArrowKeys" actionListener="#{Bean.captureArrowKey}">
....
<h:form>
<h:inputText .../>
<h:inputText .../>
....
....
<ace:autoCompleteEntry ..../>
</h:form>
....
</icecore:jsEventListener>
...
</h:body>
{code}
h2. Attributes
{tip:title=TagLib Documentation}This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available [here|http://res.icesoft.org/docs/v4_latest/core/comps/tld/icecore/jsEventListener.html].{tip}
{panel}
*events* Use this attribute to specify a comma separated list of JS events types.
*handler* Use this attribute to specify the JS function that will filter through the captured events.
*actionListener* Use this attribute to specify bean method that should be invoked.
{panel}

h2. Action listener event attributes

The event instance passed as parameter to the action listener method will carry most of the information that the original Javascript event had. The class org.icefaces.impl.component.JSEventListener$JSEvent provides getters for the following properties:

{panel}
*captured* The ID of the element that captured the JS event.
*target* The ID of the element that triggered the JS event.
*type* The event type.
*x* The X coordinate (for mouse events).
*y* The Y coordinate (for mouse events).
*alt* "Alt" key pressed.
*ctrl* "Ctrl" key pressed.
*meat* "Meta" key pressed.
*shift* "Shift" key pressed.
*keycode* The Javascript code of the key (for key press events).

{panel}