HTML events and event listeners

There are different techniques to capture an HTML event and add eventlisteners to an element.

The technique you choose is simply your preference. Pick the method you feel most comfortable with. However, you need to configure one particular permission for inline event handlers, such as <button onclick="btnClick()">Click Me</button>

Plugins and Scripts

In plugins, you will need to enable allowCodeGenerationFromStrings if you would like to use the inline event handlers shown above.
IMPORTANT: Please read about the manifest permissions module before you proceed.

In scripts, since you cannot add inline event listeners, this permission is not applicable.

System requirements

Please make sure your local environment uses the following application versions before proceeding.

InDesign v18.5 or higher
UDT v1.9.0 or higher
Manifest version v5 or higher

Examples

Declaring event listeners in JavaScript

HTML

JavaScript

<button id="firstButton">Click me</button>
<button id="secondButton">Click me</button>
Copied to your clipboard
<button id="firstButton">Click me</button>
<button id="secondButton">Click me</button>

const firstButton = document.getElementById("firstButton");
firstButton.addEventListener("click", foo);

const secondButton = document.getElementById("secondButton");
secondButton.onclick = foo;

function foo(event) {
    console.log(`Button clicked ${event.target.id}`);
}
Copied to your clipboard
const firstButton = document.getElementById("firstButton");
firstButton.addEventListener("click", foo);

const secondButton = document.getElementById("secondButton");
secondButton.onclick = foo;

function foo(event) {
    console.log(`Button clicked ${event.target.id}`);
}

Declaring inline event handlers

HTML

JavaScript

manifest

<button id="thirdButton" onclick='foo(event)'>Click me</button>
Copied to your clipboard
<button id="thirdButton" onclick='foo(event)'>Click me</button>

function foo(event) {
    console.log(`Button clicked ${event.target.id}`);
}
Copied to your clipboard
function foo(event) {
    console.log(`Button clicked ${event.target.id}`);
}

{
    "requiredPermissions": {
        "allowCodeGenerationFromStrings" : true
    }
}
Copied to your clipboard
{
    "requiredPermissions": {
        "allowCodeGenerationFromStrings" : true
    }
}