JavaScript Event Examples
write the code through proper example on following event onblur ()) event , onload () event , onclick
() event , onsubmit () event , onmouseover () , onfocus () event with reallife example in simple
language
Sure! Here are examples of each event in JavaScript with real-life scenarios explained simply:
1. `onblur()` Event
This event occurs when an element loses focus, such as when you click outside an input field after
typing.
Real-life example: Imagine you're filling out a form, and once you finish typing in a username field, the
cursor moves to the next field. The `onblur` event can be used to validate or format the username when
the input field loses focus.
Code Example:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onblur Example</title>
<script>
function checkUsername() {
let username = [Link]("username").value;
if (username === "") {
alert("Username cannot be empty!");
}
}
</script>
</head>
<body>
<form>
<label for="username">Username:</label>
<input type="text" id="username" > </form>
</body>
</html>
Here, if the username field is left empty and loses focus, an alert will pop up.
2. `onload()` Event
This event is triggered when the page or an image finishes loading.
Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 1/5
Real-life example: When you visit a website, you might want to display a welcome message once the
page is fully loaded.
Code Example:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onload Example</title>
<script>
function pageLoaded() {
alert("Page is fully loaded!");
}
</script>
</head>
<body > <h1>Welcome to My Website!</h1>
<p>Enjoy your stay!</p>
</body>
</html>
Here, once the entire page is loaded, a message pops up.
3. `onclick()` Event
This event is triggered when an element is clicked.
Real-life example: Imagine a button that submits a form. The `onclick` event can trigger the
submission.
Code Example:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onclick Example</title>
<script>
function showMessage() {
alert("Button was clicked!");
}
</script>
</head>
<body>
<button Me!</button>
</body>
</html>
Here, when you click the button, an alert will show up.
4. `onsubmit()` Event
Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 2/5
This event occurs when a form is submitted.
Real-life example: When you submit a contact form, you might want to validate the input before the
form actually submits.
Code Example:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onsubmit Example</title>
<script>
function validateForm(event) {
let email = [Link]("email").value;
if (email === "") {
alert("Email is required!");
[Link](); // Prevent form submission
}
}
</script>
</head>
<body>
<form > <label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Submit</button>
</form>
</body>
</html>
Here, when you try to submit the form, it will check if the email field is empty and prevent submission if
it is.
5. `onmouseover()` Event
This event occurs when the mouse pointer is moved over an element.
Real-life example: Imagine you want to change the color of a button when the user hovers over it.
Code Example:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onmouseover Example</title>
<style>
#hoverButton {
padding: 10px 20px;
font-size: 16px;
}
</style>
<script>
function changeColor() {
[Link]("hoverButton").[Link] = "blue";
}
Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 3/5
function revertColor() {
[Link]("hoverButton").[Link] = "gray";
}
</script>
</head>
<body>
<button id="hoverButton" Ov
er Me!</button>
</body>
</html>
Here, the button changes color when you hover over it.
6. `onfocus()` Event
This event is triggered when an element gains focus, such as when you click on an input field.
Real-life example: Imagine you want to highlight a text field when the user clicks on it, indicating where
the user should type.
Code Example:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onfocus Example</title>
<style>
.focusInput {
border: 2px solid blue;
}
</style>
<script>
function highlightInput() {
[Link]("username").[Link]("focusInput");
}
function removeHighlight() {
[Link]("username").[Link]("focusInput");
}
</script>
</head>
<body>
<form>
<label for="username">Username:</label>
<input type="text" id="username" > ()">
</form>
</body>
</html>
Here, when you click into the username field, the border turns blue to highlight the field.
Summary of Events:
`onblur()`: Triggered when an element loses focus (e.g., input field).
`onload()`: Triggered when the page or an element is fully loaded (e.g., an image or the entire
page).
Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 4/5
`onclick()`: Triggered when an element is clicked (e.g., button click).
`onsubmit()`: Triggered when a form is submitted (e.g., validating form data).
`onmouseover()`: Triggered when the mouse hovers over an element (e.g., hovering over a button).
`onfocus()`: Triggered when an element gains focus (e.g., input field clicked).
These examples should help you understand how to use each of these events in real-world scenarios!
Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 5/5
