There are two kinds of behaviors:

- `<f:ajax/>` send an ajax request
- `<tc:event/>` do a full page reload

Tag Library Documentation: |

Type a text into the input field. After leaving the input field, the given text is shown in the output field.

<tc:in label="Ajax Input" value="\#{behaviorController.ajax}"> <f:ajax render="outAjax"/> </tc:in> <tc:in label="Event Input" value="\#{behaviorController.event}"> <tc:event/> </tc:in>

It's possible to change the event name. For example if you want a double click event, change the event name to `dblclick`.

<tc:button label="Ajax Double Click"> <f:ajax event="dblclick" render="outCounter" listener="..."/> </tc:button> <tc:button label="Event Double Click"> <tc:event event="dblclick" actionListener="..."/> </tc:button>

`<tc:event>` can contain `<f:ajax>` or `<tc:operation>` tags.

This is helpful if the parent component cannot handle operations by itself, for example `<tc:row/>`. In this case, the `event` attribute of `<f:ajax/>` will be ignored.

<tc:row> <tc:event> <f:ajax execute=":::popup" render=":::popup" listener="..."/> <tc:operation name="show" for=":::popup"/> </tc:event> </tc:row>

`<f:ajax/>` and `<tc:event/>` can be used side by side. A click on the button fires the AJAX event, a double click do a full page reload.

<tc:button id="btnAjaxEvent" label="Submit" type="submit"> <f:ajax event="click" render="out" listener="\#{behaviorController.eventOutput}"/> <tc:event event="dblclick" actionListener="\#{behaviorController.eventOutput}"/> </tc:button> <tc:out id="out" label="Output:" value="\#{behaviorController.output}"/>

The `<tc:event/>` tag allows some control over DOM events.

The `stopPropagation` attribute prevents further propagation of the current event (see ). This is useful for example for a sortable sheet with a component inside the `bar`-facet.

In the following example the input field for filter by names can be clicked without execute the sorting.

<tc:sheet ...> <tc:column label="Name" sortable="true"> <f:facet name="bar"> <tc:panel> <tc:style customClass="d-inline-block"/> <tc:event stopPropagation="true" omit="true"> <tc:in value="\#{sheetFilterController.name}"> <f:ajax execute=":::sheet" render=":::sheet" listener="\#{sheetFilterController.filter}"/> </tc:in> </tc:event> </tc:panel> </f:facet> <tc:out value="\#{object.name}" plain="true"/> </tc:column> ... </tc:sheet>

If the `customEventName` attribute is set, a is fired by the given name.

<tc:button label="Fire event"> <tc:event omit="true" customEventName="my-event"/> </tc:button> <tc:panel> <tc:style customClass="custom-event-result"/> </tc:panel> document.addEventListener("DOMContentLoaded", function (event) { document.querySelector("body").addEventListener("my-event", () => document.querySelector(".custom-event-result").textContent = "my-event fired at " + new Date()); });