An event is a signal that something has happened — a user action or browser-triggered activity like:
JavaScript listens for these events and lets you run code when they occur.
| Event Name | Triggered When... |
|---|---|
click | An element is clicked |
mouseover | Mouse hovers over an element |
mouseout | Mouse leaves an element |
keydown | A key is pressed |
keyup | A key is released |
change | Form field value changes |
submit | A form is submitted |
load | The page or image finishes loading |
dblclick | Element is double-clicked |
<button onclick="sayHello()">Click Me</button>
<script>
function sayHello() {
alert("Hello from inline event!");
}
</script><button id="btn">Click</button>
<script>
document.getElementById("btn").onclick = function () {
alert("Clicked!");
};
</script>const btn = document.getElementById("btn");
btn.addEventListener("click", function () {
alert("Event using addEventListener");
});This is the recommended way — it allows multiple listeners and better separation of HTML and JS.
<div id="box" style="width:100px;height:100px;background:red;"></div>
<script>
const box = document.getElementById("box");
box.addEventListener("mouseover", () => {
box.style.background = "blue";
});
box.addEventListener("mouseout", () => {
box.style.background = "red";
});
</script>document.addEventListener("keydown", function (e) {
console.log("Key pressed:", e.key);
});You can capture key values like 'Enter', 'Escape', 'ArrowUp', etc.
<form id="myForm">
<input type="text" name="username" />
<button type="submit">Submit</button>
</form>
<script>
const form = document.getElementById("myForm");
form.addEventListener("submit", function (e) {
e.preventDefault(); // Prevents actual form submission
alert("Form submitted via JavaScript!");
});
</script>You can access event details like type, target element, key pressed, mouse position, etc.
document.addEventListener("click", function (event) {
console.log(event.type); // click
console.log(event.target); // element clicked
});function greet() {
alert("Hello!");
}
btn.addEventListener("click", greet);
// Later...
btn.removeEventListener("click", greet);Note: You must use a named function (not an anonymous one) to remove a listener.