JavaScript Events
Making web pages interactive with user actions
⚡ What are JavaScript Events?
Events are actions that happen in the browser - like clicking a button, typing in a text field, or loading a page. JavaScript can "listen" for these events and respond to them.
// Listen for a button click
button.addEventListener('click', function() {
alert('Button was clicked!');
});
Common Event Types
Mouse Events
User interactions with mouse
Keyboard Events
User interactions with keyboard
Form Events
Form and input interactions
Window Events
Browser window interactions
🔹 Click Events
The most common event - responding to button clicks:
<!-- HTML -->
<button id="myButton">Click Me!</button>
<p id="message"></p>
<script>
// JavaScript
let button = document.getElementById('myButton');
let message = document.getElementById('message');
button.addEventListener('click', function() {
message.textContent = 'Button was clicked!';
message.style.color = 'green';
});
</script>Output:
🔹 Mouse Events
Respond to different mouse interactions:
<!-- HTML -->
<div id="mouseBox" style="width: 200px; height: 100px; background: lightblue; padding: 20px;">
Hover over me!
</div>
<script>
let box = document.getElementById('mouseBox');
// Mouse enters the box
box.addEventListener('mouseover', function() {
box.style.background = 'lightgreen';
box.textContent = 'Mouse is over me!';
});
// Mouse leaves the box
box.addEventListener('mouseout', function() {
box.style.background = 'lightblue';
box.textContent = 'Hover over me!';
});
</script>Output:
🔹 Keyboard Events
Respond to keyboard input:
<!-- HTML -->
<input type="text" id="textInput" placeholder="Type something...">
<p id="keyInfo"></p>
<script>
let input = document.getElementById('textInput');
let info = document.getElementById('keyInfo');
input.addEventListener('keyup', function(event) {
info.textContent = `You typed: "${input.value}" (Key: ${event.key})`;
});
</script>Output:
🔹 Form Events
Handle form submissions and input changes:
<!-- HTML -->
<form id="myForm">
<input type="text" id="nameInput" placeholder="Enter your name" required>
<button type="submit">Submit</button>
</form>
<p id="formResult"></p>
<script>
let form = document.getElementById('myForm');
let result = document.getElementById('formResult');
form.addEventListener('submit', function(event) {
event.preventDefault(); // Prevent page reload
let name = document.getElementById('nameInput').value;
result.textContent = `Hello, ${name}! Form submitted successfully.`;
result.style.color = 'green';
});
</script>Output:
🔹 Event Object
Events provide information about what happened:
Common Event Properties:
- event.target: The element that triggered the event
- event.type: The type of event (click, keyup, etc.)
- event.key: The key that was pressed (for keyboard events)
- event.preventDefault(): Stops the default action
button.addEventListener('click', function(event) {
console.log('Event type:', event.type);
console.log('Target element:', event.target);
console.log('Click coordinates:', event.clientX, event.clientY);
});