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>

data-variant=info

data-slots=header, text1, text2
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.

Examples

Declaring event listeners in JavaScript

data-slots=heading, code

data-repeat=2

data-languages=HTML, JavaScript

HTML

<button id="firstButton">Click me</button>
<button id="secondButton">Click me</button>

JavaScript

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

data-slots=heading, code

data-repeat=3

data-languages=HTML, JavaScript, JSON

HTML

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

JavaScript

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

manifest

{
    "requiredPermissions": {
        "allowCodeGenerationFromStrings" : true
    }
}

Additional notes

Reference material