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

See forge#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

<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)

<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)

<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.

<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

<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)