Events

Events are things that happen in HTML objects that can trigger scripting code. JavaScript can be executed by events in HTML via two methods:

• The JavaScript code can appear within the appropriate HTML attribute in the HTML object.
• Or a separate script can define an event handler on the object that executes when the event is fired.

Syntax 1

You can assign JavaScript code to an event attribute in an HTML object.

<!-- Clicking pops up a "Hello World!" dialog box -->
<button onclick="window.alert('Hello World!');">Click Me!</button>

Syntax 2

There’s HTML on the page with the object of interest.

<button id="hello-button">Click Me!</button>

In a separate script the object is referred to and assigned an event handler.

// Clicking the "hello-button" button pops up a "Hello World!" dialog box
var btn = document.getElementById('hello-button');

btn.addEventListener('click', () => {
  window.alert('Hello World!');
});