---
title: "Important: #91117 - Use GlobalEventHandler and ActionDispatcher instead of inline JS"
manual: "TYPO3 Core Changelog"
version: "main"
permalink: "https://docs.typo3.org/permalink/changelog:important-91117"
source: "Changelog/10.4.x/Important-91117-UseGlobalEventHandlerAndActionDispatcherInsteadOfInlineJS.rst"
modified: "2026-09-15T10:46:36+00:00"
---

# Important: #91117 - Use GlobalEventHandler and ActionDispatcher instead of inline JS

See [forge#91117](https://forge.typo3.org/issues/91117)

## Description

In order to reduce the amount of inline JavaScript (with the goal to pave the
way towards stronger Content-Security-Policy assignments) lots of inline JavaScript
code parts have been substituted by a declarative syntax - basically using HTML
`data-*` attributes.

The following list collects an overview of common JavaScript snippets and their
corresponding substitute using modules `TYPO3/CMS/Backend/GlobalEventHandler`
and `TYPO3/CMS/Backend/ActionDispatcher`.

### `TYPO3/CMS/Backend/GlobalEventHandler`

```html
<select onchange="window.location.href=this.options[this.selectedIndex].value;">'
<!-- ... changed to ... -->
<select data-global-event="change" data-action-navigate="$value">'
```

Navigates to URL once selected drop-down was changed
(`$value` refers to selected value)

```html
<select value="0" name="depth"
   onchange="window.location.href='https://example.org/__VAL__'.replace(/__VAL__/, this.options[this.selectedIndex].value);">
<!-- ... changed to ... -->
<select value="0" name="depth" data-global-event="change"
   data-action-navigate="$data=~s/$value/" data-navigate-value="https://example.org/${value}">
```

Navigates to URL once selected drop-down was changed, including selected value
(`$data` refers to value of `data-navigate-value`, `$value` to selected value,
`$data=~s/$value/` replaces literal `${value}` with selected value in `:html:`data-navigate-value\`)

```html
<input type="checkbox" name="setting" onclick="window.location.href='/?setting='+(this.checked ? 1 : 0)">
<!-- ... changed to ... -->
<input type="checkbox" name="setting" value="1" data-empty-value="0"
   data-global-event="change" data-action-navigate="$data=~s/$value/">
```

Checkboxes used to send a particular value when being unchecked can be achieved by using
`data-empty-value="0"` \- in case this attribute is omitted, an empty string `''` is sent.

```html
<input type="checkbox" onclick="document.getElementById('formIdentifier').submit();">
<!-- ... changed to ... -->
<input type="checkbox" data-global-event="change" data-action-submit="$form">
<!-- ... or (using CSS selector) ... -->
<input type="checkbox" data-global-event="change" data-action-submit="#formIdentifier">
```

Submits a form once a value has been changed
(`$form` refers to paren form element, using CSS selectors like `#formIdentifier`
is possible as well)

### `TYPO3/CMS/Backend/ActionDispatcher`

```html
<a href="#" onclick="top.TYPO3.InfoWindow.showItem('tt_content', 123); return false;">
<!-- ... changed to ... -->
data-dispatch-action="TYPO3.InfoWindow.showItem" data-dispatch-args-list="be_users,123">
<!-- ... or (using JSON arguments) ... -->
data-dispatch-action="TYPO3.InfoWindow.showItem" data-dispatch-args="[&quot;tt_content&quot;,123]">
```

Invokes `TYPO3.InfoWindow.showItem` module function to display details for a given
record (of database table `tt_content`, having `uid=123` in the example above)