JavaScript
- JavaScript Introduction
- JavaScript Where To
- JavaScript Output
- JavaScript Statements
- JavaScript Syntax
- JavaScript Comments
- JavaScript Variables
- JavaScript Let
- JavaScript Const
- JavaScript Operators
- JavaScript Assignment
- JavaScript Data Types
- JavaScript Functions
- JavaScript Objects
- JavaScript Events
- JavaScript Strings
- JavaScript String Methods
- JavaScript Numbers
- JavaScript Number Methods
- JavaScript Arrays
- JavaScript Array Const
- JavaScript Array Methods
- JavaScript Sorting Arrays
- JavaScript Array Iteration
- JavaScript Date Objects
- JavaScript Date Formats
- JavaScript Get Date Methods
- JavaScript Set Date Methods
- JavaScript Math Object
- JavaScript Random
- JavaScript Booleans
- JavaScript Comparison And Logical Operators
- JavaScript If Else And Else If
- JavaScript Switch Statement
- JavaScript For Loop
- JavaScript Break And Continue
- JavaScript Type Conversion
- JavaScript Bitwise Operations
- JavaScript Regular Expressions
- JavaScript Errors
- JavaScript Scope
- JavaScript Hoisting
- JavaScript Use Strict
- The JavaScript This Keyword
- JavaScript Arrow Function
- JavaScript Classes
- JavaScript JSON
- JavaScript Debugging
- JavaScript Style Guide
- JavaScript Common Mistakes
- JavaScript Performance
- JavaScript Reserved Words
- JavaScript Versions
- JavaScript History
- JavaScript Forms
- JavaScript Validation API
- JavaScript Objects
- JavaScript Object Properties
- JavaScript Function Definitions
- JavaScript Function Parameters
- JavaScript Function Invocation
- JavaScript Closures
- JavaScript Classes
- Java Script Async
- JavaScript HTML DOM
- The Browser Object Model
- JS Ajax
- JavaScript JSON
- JavaScript Web APIs
- JS Vs JQuery
JavaScript Events
HTML Events
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:
<button onclick="alert('Button clicked!')">Click Me</button>
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>
<script>
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>
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
<!DOCTYPE html>
<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>
<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
Products
Partner
Copyright © RVR Innovations LLP 2024 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP