JavaScript Events Tutorial

JavaScript Events

Written by Swapnil RajaPublished 24 Aug 2026

A JavaScript event is something that happens on a page, and code can run in response.

A click, a key press, a form being submitted - each of these is an event.

Events are what turn a page from something you read into something you use.

Example

javascript

document.body.innerHTML = '<button id="btn">Click me</button>';

const btn = document.getElementById("btn");

btn.addEventListener("click", function () {
  console.log("Button was clicked");
});

btn.click();

The last line fires the click in code, so the example prints straight away.

On a real page a visitor would do the clicking.

What is an Event?

An event is a signal that something has happened.

A handler is the function that runs when it does.

addEventListener connects the two.

Syntax

javascript

element.addEventListener("click", handler);

The event name is a string and has no on prefix.

Common Events

click when something is clicked.

input when a field is typed in.

submit when a form is sent.

Example

javascript

document.body.innerHTML = '<input id="field">';

const field = document.getElementById("field");

field.addEventListener("input", function () {
  console.log("Typed: " + field.value);
});

field.value = "abc";
field.dispatchEvent(new Event("input"));

dispatchEvent fires an event the same way the browser would.

The Handler Is a Function

Pass the function itself, without brackets.

Adding brackets calls it immediately and hands the result to the listener instead.

Example

javascript

document.body.innerHTML = '<button id="btn">Go</button>';

function sayHi() {
  console.log("Hi");
}

document.getElementById("btn").addEventListener("click", sayHi);
document.getElementById("btn").click();

Writing sayHi() here would run it once and then listen for nothing.

The Older onclick Property

This still works and you will see it in older code.

It only holds one handler, so a second assignment replaces the first.

Example

javascript

document.body.innerHTML = '<button id="btn">Go</button>';

const btn = document.getElementById("btn");

btn.onclick = function () {
  console.log("first");
};
btn.onclick = function () {
  console.log("second");
};

btn.click();

Only second is printed, because the first handler was overwritten.

addEventListener Allows Many

This is the main reason it is preferred.

Example

javascript

document.body.innerHTML = '<button id="btn">Go</button>';

const btn = document.getElementById("btn");

btn.addEventListener("click", function () {
  console.log("first");
});
btn.addEventListener("click", function () {
  console.log("second");
});

btn.click();

Both handlers run, in the order they were added.

Keep Markup and Behaviour Apart

An onclick attribute in the HTML mixes the two together.

Attaching listeners in JavaScript keeps your markup clean.

Example

javascript

document.body.innerHTML = '<button id="btn">Go</button>';

document.getElementById("btn").addEventListener("click", function () {
  console.log("handled in JavaScript");
});

document.getElementById("btn").click();

The HTML says what the button is; the JavaScript says what it does.

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Events</title>
</head>
<body>

  <h1>JavaScript Events</h1>

  <button id="btn">Click me</button>

  <p id="out"></p>

  <script>
    const btn = document.getElementById("btn");
    let count = 0;

    btn.addEventListener("click", function () {
      count = count + 1;
      document.getElementById("out").textContent = "Clicked " + count + " times";
    });
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try a second listener:

Add another click listener and see both run.

Important Points

An event is a signal that something happened.
addEventListener connects an event to a handler.
The event name has no on prefix.
Pass the function without brackets.
addEventListener allows many handlers; onclick allows one.

Conclusion

Events are what make a page interactive.

addEventListener is the modern way to respond to them.

The rest of this section covers the events you will use most.

PreviousJavaScript Forms and Inputs NextJavaScript addEventListener