JavaScript Events
An event is something that happens on the page, like a click, a key press or the page finishing loading. JavaScript can run code when an event happens.
Common Events
| Event | Happens when |
|---|---|
click | The user clicks an element |
input | The value of an input box changes |
change | A select box, checkbox or input is changed and left |
mouseover | The mouse moves over an element |
mouseout | The mouse leaves an element |
keydown | The user presses a key |
submit | A form is submitted |
load | The page has finished loading |
Event Attributes in HTML
The quickest way is an attribute like onclick on the element:
Example
<!DOCTYPE html>
<html>
<body>
<p id="counter">Likes: 0</p>
<button onclick="addLike()">Like</button>
<script>
let likes = 0;
function addLike() {
likes++;
document.getElementById("counter").innerHTML = "Likes: " + likes;
}
</script>
</body>
</html>addEventListener
The better way keeps JavaScript out of the HTML. Find the element, then call addEventListener(eventName, function):
Example
<!DOCTYPE html>
<html>
<body>
<button id="btn">Show today's date</button>
<p id="demo"></p>
<script>
const btn = document.getElementById("btn");
btn.addEventListener("click", function () {
document.getElementById("demo").innerHTML = new Date().toDateString();
});
</script>
</body>
</html>Write the event name without "on": use "click" in addEventListener, but onclick as an HTML attribute.
Why addEventListener is better
- HTML and JavaScript stay separate
- You can add more than one function to the same event
- You can remove a listener later with
removeEventListener()
Reacting to Typing
The input event runs every time the text changes. This live preview shows a name as you type it:
Example
<!DOCTYPE html>
<html>
<body>
<input id="name" placeholder="Type your name">
<p id="preview">Hello!</p>
<script>
document.getElementById("name").addEventListener("input", function (event) {
document.getElementById("preview").innerHTML = "Hello, " + event.target.value + "!";
});
</script>
</body>
</html>The function receives an event object. event.target is the element where the event happened.
Mouse Events
Example
<!DOCTYPE html>
<html>
<body>
<div id="box" style="width:180px;padding:30px;background:#ddd;text-align:center">Move the mouse here</div>
<script>
const box = document.getElementById("box");
box.addEventListener("mouseover", () => {
box.style.background = "#f0db4f";
box.innerHTML = "Hello!";
});
box.addEventListener("mouseout", () => {
box.style.background = "#ddd";
box.innerHTML = "Move the mouse here";
});
</script>
</body>
</html>Stopping a Form From Reloading
By default, submitting a form reloads the page. event.preventDefault() stops that so JavaScript can handle the form:
Example
<!DOCTYPE html>
<html>
<body>
<form id="signup">
<input id="phone" placeholder="Phone number">
<button type="submit">Join</button>
</form>
<p id="msg"></p>
<script>
document.getElementById("signup").addEventListener("submit", function (event) {
event.preventDefault();
const phone = document.getElementById("phone").value;
document.getElementById("msg").innerHTML = phone === "" ? "Please enter a phone number." : "Thanks! We will call " + phone;
});
</script>
</body>
</html>Exercise
Exercise
Which line correctly runs the function save when a button is clicked?