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>

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.

System requirements

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

Premiere Pro v25.2 or higher
UDT v2.1.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
    }
}