Web Development - JavaScript Events
JavaScript Events
Events let you make web pages interactive. They are actions that happen in the browser, like a button click, a key press, or when the page finishes loading.
What is an Event?
An event is something that happens on the page. Your JavaScript can "listen" for these events and run a function when they occur.
- Clicking a button
- Typing in an input field
- Hovering over an image
- Submitting a form
- Loading or resizing the page
To react to events, you attach an event handler (a function) to an element.
Ways to Attach Events
There are three common ways to attach events:
- Inline in the HTML (for small demos)
- Using an element's event property (like
onclick) - Using
addEventListener()(recommended)
Inline Event Handler (HTML Attribute)
You can add JavaScript directly to an element's event attribute. This is easy for quick tests, but not recommended for larger projects.
Example
Change text when a button is clicked:
<p id="demo">Click the button.</p>
<button onclick="showMessage()">Click me</button>
<script>
function showMessage() {
document.getElementById("demo").innerHTML = "Button was clicked.";
}
</script>
Try it Yourself »
Here, the HTML calls showMessage() directly when the button is clicked.
Event Property (element.onclick)
You can also assign a function to an element's event property in JavaScript.
Example
Set a click handler in JavaScript:
<p id="demo">Click the button.</p>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById("myButton");
button.onclick = function () {
document.getElementById("demo").innerHTML = "Clicked using onclick property.";
};
</script>
Try it Yourself »
This keeps the behavior in JavaScript instead of in the HTML, but you can only assign one function to onclick.
addEventListener() (Recommended)
The recommended way to attach events is addEventListener().
It keeps HTML and JavaScript separate and allows multiple handlers for the same event.
Example
Attach a click event with addEventListener():
<p id="demo">Click the button.</p>
<button id="greetBtn">Click me</button>
<script>
const button = document.getElementById("greetBtn");
button.addEventListener("click", showMessage);
function showMessage() {
document.getElementById("demo").innerHTML = "Button clicked with addEventListener.";
}
</script>
Try it Yourself »
Here, the HTML only defines the button. All behavior is added from JavaScript.
Tip: For real projects, prefer addEventListener() over inline handlers like onclick.
Example: Click Counter
This example counts how many times the user clicks a button, using addEventListener().
Example
Count button clicks:
<p>Button clicks: <span id="count">0</span></p>
<button id="countBtn">Click me</button>
<script>
let clicks = 0;
const countButton = document.getElementById("countBtn");
countButton.addEventListener("click", function () {
clicks = clicks + 1;
document.getElementById("count").innerHTML = clicks;
});
</script>
Try it Yourself »
Each click runs the function passed to addEventListener(), and the page updates with the new count.
Mouse Events with addEventListener()
You can use addEventListener() with many event types, such as mouseover and mouseout.
Example
Change the background color when the mouse enters and leaves a box:
<div id="box" style="width:120px;height:120px;background:lightblue;"></div>
<script>
const box = document.getElementById("box");
box.addEventListener("mouseover", function () {
box.style.backgroundColor = "coral";
});
box.addEventListener("mouseout", function () {
box.style.backgroundColor = "lightblue";
});
</script>
Try it Yourself »
The box changes color when the mouse is over it, and changes back when the mouse leaves.
Input Events with addEventListener()
Events are very useful with form elements. You can react while the user is typing and show live feedback.
Example
Show what the user types:
<input id="nameInput" type="text" placeholder="Type your name">
<p id="preview"> </p>
<script>
const input = document.getElementById("nameInput");
input.addEventListener("input", function () {
const value = input.value;
document.getElementById("preview").innerHTML = "You typed: " + value;
});
</script>
Try it Yourself »
The input event fires every time the user changes the value in the text field.
Common Event Types
Here are some common event types you can use with addEventListener():
| Event type | When it happens |
|---|---|
"click" |
When an element is clicked |
"mouseover" |
When the mouse enters an element |
"mouseout" |
When the mouse leaves an element |
"input" |
When the value of an input changes |
"submit" |
When a form is submitted |
The Event Object (Basic)
When an event happens, JavaScript creates an event object with details about the event. You can receive it as a parameter in your function.
Example
Show which key was pressed:
<input id="keyInput" type="text" placeholder="Press a key">
<p id="keyInfo"> </p>
<script>
const keyInput = document.getElementById("keyInput");
keyInput.addEventListener("keydown", function (event) {
document.getElementById("keyInfo").innerHTML = "You pressed: " + event.key;
});
</script>
Try it Yourself »
The event object here tells you which key was pressed.
Summary
- Events happen when the user interacts with the page.
- You can attach event handlers inline, through properties, or with
addEventListener(). addEventListener()is the recommended way for real projects.- Use
document.getElementById()andinnerHTMLto update the page when events occur. - The event object gives you details about what happened (like which key was pressed).
Next, you will see small JavaScript examples that combine events, DOM changes, and basic logic to build interactive pages.
