All action handler functions are provided with an action event which is a derivate of $.Event and provides, beside others, the following attributes:

$trigger: The jquery instance, which was responsible for triggering the event e.g. a button.

$target: Can be used to define a target component or widget and is defined by the data-action-target attribute of $trigger. If not explicitly set, the $trigger node will also be the events $target. See the component section for more details.

url: Contains the data-action-url or data-action-click-url (will be prefered in case of click events).

params: Can be used to add additional action parameters by setting data-action-params or the more specific data-action-click-params in case of a click event.

Info: The client module knows how to handle action events and will try to determine the url from the given event instance if no url was explicitly provided as argument. In case of client.submit, the client will try to determine the url of the forms action if the trigger does not specify an action url.

originalEvent: The original event which triggered the action

finish: This function is called to mark the action as completed, this function may be called manually to release the action block or remove the loader animation of a trigger with data-ui-loader flag. See the Action Blocking section for more information.

To prevent actions from beeing executed multiple times before finishing, actions are blocked during the execution time by default. The blocking logic can be configured by setting the data-action-block on the trigger node. The following block values are available:

none: No blocking at all

sync: Synchronous blocking, the block will be released after the handler finished. This is the default block for all non async trigger elements.

async: The block has to be released manually by calling the event.finish() function. Note this block type is used by default for action handlers with a given data-action-url, data-action-submit or type="submit" trigger.

Note: client calls as client.get(evt) or client.submit(evt) will call the events finish function automatically after receiving the server response, so you won't have to call it in your handler.

Note: The first argument of the bindAction should be the first static (never removed from dom or lazy loaded) parent node of all nodes you wish to bind.

Note: Too many delegated events to the document is a performance antipattern.

How does it work:

In the previous example the bindAction call will bind a delegate to the document:
`javascript
$(document).on('customevent', '[data-action-customevent]', function() {...});
`
If the delegate handler receives an unhandled action event, it will rebind all bindings directly to the trigger elements and run the action.
All upcoming events will directly be handled by the trigger, which prevents the bubbling latency.

Note: As long as you don't need any custom bindings, you won't have to worry about the binding mechanism.

Tip: Since humhub action binding is based on jquerys event delegation, you can use all event types of jquery.