JavaScript Tutorial
JavaScript Events
Events are things that happen: click, submit, input, load. A handler function runs when they fire.
Things that happen
An event is a signal from the page: a click, a key, a form submit, a finished load. JavaScript sits still until one of those signals fires, then it runs a function you registered — the handler.
Without events, a script runs once from top to bottom and stops. With events, the page keeps listening. That is the difference between a static document and an app.
click with addEventListener
addEventListener is the method this tutorial prefers. You pick an element, name the event, and pass a function. Each click runs that function. You can add more than one listener to the same element.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click</title>
</head>
<body>
<button id="bump">Add one</button>
<p id="out">0</p>
<script>
let count = 0;
const out = document.getElementById("out");
document.getElementById("bump").addEventListener("click", function () {
count += 1;
out.textContent = count;
console.log("count is", count);
});
</script>
</body>
</html>The first argument is the event name as a string: "click", not onclick. The second argument is the handler. An anonymous function is fine when the handler is short. Name it when you want to remove it later or reuse it.
Click Try it in JavaScript. The snippet opens at /javascript/try — a live page on the right and a console under it. Click the button in the preview; the paragraph and the console both update.
onclick on the element
The older style sets a property or an HTML attribute named onclick. It works. It also replaces any previous onclick on that element, so a second assignment wipes the first. PreferaddEventListener in new code. You will still meet onclick in examples and in generated HTML.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onclick</title>
</head>
<body>
<button onclick="document.getElementById('out').textContent = 'Clicked.';">
Mark clicked
</button>
<button id="also">Also mark</button>
<p id="out">Waiting.</p>
<script>
document.getElementById("also").onclick = function () {
document.getElementById("out").textContent = "Clicked from the script.";
};
</script>
</body>
</html>The first button uses an HTML attribute. The second assigns onclick in the script. Both write to the same paragraph. Keep handlers in the script when they are more than one short statement — quotes inside attributes get messy fast.
input
input fires on every change in a text field, including each key. Readevent.target.value (or the element's .value) and write it somewhere else. That is a live preview, a character count, or a filter box.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input</title>
</head>
<body>
<label>
Name
<input id="name" type="text" placeholder="Type a name">
</label>
<p id="out">Hello.</p>
<script>
const field = document.getElementById("name");
const out = document.getElementById("out");
field.addEventListener("input", function () {
const name = field.value.trim();
out.textContent = name === "" ? "Hello." : "Hello, " + name + ".";
});
</script>
</body>
</html>submit
A form's submit event fires when the user clicks the submit button or presses Enter in a field. The browser's default is to send the form and reload the page. In a script-driven page that would wipe your state. Call event.preventDefault() to stay on this page and handle the values yourself.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Submit</title>
</head>
<body>
<form id="hello">
<label>
Name
<input name="name" type="text" required>
</label>
<button type="submit">Greet</button>
</form>
<p id="out"></p>
<script>
document.getElementById("hello").addEventListener("submit", function (event) {
event.preventDefault();
const data = new FormData(event.target);
const name = data.get("name");
document.getElementById("out").textContent = "Hello, " + name + ".";
console.log("submitted", name);
});
</script>
</body>
</html>Listen for submit on the <form>, not for click on the button. Enter in a field submits the form. A click handler on the button misses that path.
load
window fires load when the page and its images have finished. Scripts at the end of <body> already see the HTML above them, so beginners often do not needload. Use it when the handler must wait for images or for every subresource. Prefer putting the<script> just before </body> so the elements exist without a load listener.
DOMContentLoaded fires earlier: HTML is parsed, images may still be loading. Either event's handler is a function, same as click.
The handler function
The browser calls your handler with an event object. Common properties: event.type (the name),event.target (the element that fired), event.preventDefault() (cancel the browser's default). You do not have to name the parameter if you do not use it.
Keep handlers small. Read values, call a function that does the work, write the result back to the page. That split is the same as the functions chapter: parameters in, a return value or a DOM update out.
Next: strings — quotes, length, indexing, and concatenation.