JavaScript events are actions or occurrences that happen in the browser, often initiated by user interactions or system-generated processes. Events enable developers to create interactive and dynamic web pages by triggering JavaScript code in response to specific actions. In this guide, we'll explore JavaScript events in HTML comprehensively, covering different event types, event handling methods, event propagation, and practical examples.
Table of Contents
1.Introduction to Events
2.Types of JavaScript Events
- Mouse Events
- Keyboard Events
- Form Events
- Window Events
3.Event Handling Techniques
- Inline Event Handling
- Using Event Listeners
- Event Object
- Preventing Default Behavior
4.Event Propagation
- Event Bubbling
- Event Capturing
Examples of JavaScript Events in HTML
1. Introduction to Events
2. Types of JavaScript Events
Mouse Events
- click: Occurs when the user clicks an element.
- mouseover: Fires when the mouse pointer enters the element.
- mouseout: Triggers when the mouse pointer leaves the element.
- mousemove: Happens when the mouse pointer is moved over the element.
Keyboard Events
Keyboard events are triggered by user interactions with the keyboard. Key events include:
- keydown: Fires when a key is pressed down.
- keyup: Occurs when a key is released.
- keypress: Triggers when a key is pressed and released.
Form Events
Form events are related to form elements and form submissions. Key form events include:
- submit: Occurs when a form is submitted.
- change: Happens when the value of an input element changes.
- focus: Fires when an element gains focus.
- blur: Triggers when an element loses focus.
Window Events
Window events are related to the browser window itself. Important window events include:
- load: Occurs when the document and its external resources finish loading.
- resize: Fires when the browser window is resized.
- scroll: Triggers when scrolling happens within an element.
3. Event Handling Techniques
Inline Event Handling
Example of inline event handling:
Using Event Listeners
Example of using event listeners:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Handling Example</title>
</head>
<body>
<button id="myButton">Click Me</button>
<script>
const myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
alert('Button clicked!');
});
</script>
</body>
</html>
const outerDiv = document.getElementById('outerDiv');
const innerDiv = document.getElementById('innerDiv');
outerDiv.addEventListener('click', function() {
console.log('Outer div clicked!');
}, true); // Third parameter indicates capturing phase
innerDiv.addEventListener('click', function() {
console.log('Inner div clicked!');
});
</script>
5. Examples of JavaScript Events in HTML
Let's explore a few practical examples of JavaScript events in HTML:
Example 1: Mouse Events
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Events Example</title>
</head>
<body>
<button id="myButton">Click Me</button>
<div id="myDiv"></div>
<script>
const myButton = document.getElementById('myButton');
const myDiv = document.getElementById('myDiv');
myButton.addEventListener('click', function() {
alert('Button clicked!');
});
myDiv.addEventListener('mouseover', function() {
myDiv.style.backgroundColor = 'lightblue';
});
myDiv.addEventListener('mouseout', function() {
myDiv.style.backgroundColor = 'white';
});
</script>
</body>
</html>
Practice Excercise Practice now