Complete Web Designing Course for Beginners

Lesson 6.7 – Events

🚀 Making Websites Respond to User Actions

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand JavaScript Events

✅ Handle Button Click Events

✅ Handle Mouse Events

✅ Handle Keyboard Events

✅ Handle Form Events

✅ Create Interactive Websites

✅ Build Real-World JavaScript Applications

📖 Introduction

Until now, our JavaScript programs run automatically.

Example:

alert("Welcome Student");

The popup appears immediately when the page loads.

But modern websites work differently.

Examples:

YouTube

When user clicks:

Play Button

Video starts.

Amazon

When user clicks:

Add to Cart

Product is added.

Facebook

When user clicks:

Like Button

Like count increases.

These actions happen because of:

🖱️ Events

🤔 What is an Event?

An Event is an action performed by the user or browser.

Simple Definition

Event = Something That Happens

Examples:

✅ Mouse Click

✅ Mouse Hover

✅ Keyboard Press

✅ Form Submit

✅ Page Load

✅ Image Click

🌟 Real Life Example

Imagine a doorbell.

Action:

Button Pressed

Response:

Bell Rings

Similarly:

Button Click

↓

JavaScript Function Runs

🎯 Event Flow

User Action

      ↓

Event Occurs

      ↓

JavaScript Executes

      ↓

Result Displayed

🌟 Common JavaScript Events

Event	Description
onclick	Mouse Click
ondblclick	Double Click
onmouseover	Mouse Over
onmouseout	Mouse Leave
onkeydown	Key Press
onkeyup	Key Release
onsubmit	Form Submit
onload	Page Load

🎯 Click Event (onclick)

Most commonly used event.

HTML

<button onclick="showMessage()">

Click Me

</button>

JavaScript

function showMessage()
{

alert("Welcome Student");

}

Output

Click Button →

Welcome Student

Popup appears.

🌟 Complete Example

<!DOCTYPE html>

<html>

<body>

<button onclick="showMessage()">

Click Me

</button>

<script>

function showMessage()
{

   alert("Hello JavaScript");

}

</script>

</body>

</html>

🎯 Changing Text Using Events

HTML

<h1 id="heading">

Welcome

</h1>

<button onclick="changeText()">

Change Text

</button>

JavaScript

function changeText()
{

   document.getElementById("heading").innerHTML =
   "Welcome Student";

}

Output

Before Click:

Welcome

After Click:

Welcome Student

🌟 Changing Background Color

HTML

<button onclick="changeColor()">

Change Color

</button>

JavaScript

function changeColor()
{

document.body.style.backgroundColor =
"lightblue";

}

Output

Button click changes webpage color.

🎯 Double Click Event

Event:

ondblclick

Example

<button ondblclick="showMessage()">

Double Click Me

</button>

function showMessage()
{

alert("Double Click Detected");

}

Output

Double click button →

Popup appears.

🌟 Mouse Over Event

Triggered when mouse enters an element.

HTML

<h1 onmouseover="showMessage()">

Move Mouse Here

</h1>

JavaScript

function showMessage()
{

alert("Mouse Detected");

}

Output

Move mouse over heading →

Popup appears.

🎯 Mouse Out Event

Triggered when mouse leaves an element.

HTML

<h1 onmouseout="showMessage()">

Move Mouse Away

</h1>

JavaScript

function showMessage()
{

alert("Mouse Left");

}

Output

Move mouse away →

Popup appears.

🌟 Keyboard Events

Used when user presses keys.

onkeydown

Triggered when key is pressed.

HTML

<input type="text"

onkeydown="keyPressed()">

JavaScript

function keyPressed()
{

console.log("Key Pressed");

}

Output

Every key press is detected.

🎯 onkeyup Event

Triggered when key is released.

HTML

<input type="text"

onkeyup="showMessage()">

JavaScript

function showMessage()
{

console.log("Key Released");

}

Output

Runs after key release.

🌟 Form Submit Event

Used in forms.

HTML

<form onsubmit="submitForm()">

<input type="text">

<button>

Submit

</button>

</form>

JavaScript

function submitForm()
{

   alert("Form Submitted");

}

Output

Click Submit →

Form Submitted

🎯 Page Load Event

Runs when webpage loads.

HTML

<body onload="welcome()">

JavaScript

function welcome()
{

alert("Website Loaded");

}

Output

Page opens →

Popup appears automatically.

🌟 Multiple Events Example

HTML

<button onclick="clickEvent()">

Click

</button>

<button ondblclick="doubleClickEvent()">

Double Click

</button>

JavaScript

function clickEvent()
{

   alert("Button Clicked");

}

function doubleClickEvent()
{

   alert("Button Double Clicked");

}

🎯 Real World Example – Light ON/OFF

HTML

<button onclick="lightOn()">

ON

</button>

<button onclick="lightOff()">

OFF

</button>

JavaScript

function lightOn()
{

document.body.style.backgroundColor =
"yellow";

}

function lightOff()
{

document.body.style.backgroundColor =
"white";

}

Output

ON Button →

Yellow Background

OFF Button →

White Background

💻 Complete Practical Program

index.html

🎯 Expected Output

Before Click:

Welcome Student

After Click:

JavaScript Events Working

🏫 Real World Applications

Events are used in:

✅ Login Systems

✅ Registration Forms

✅ ATM Machines

✅ Online Exams

✅ Shopping Websites

✅ Mobile Applications

✅ Robotics Dashboards

✅ IoT Control Panels

⚠️ Common Beginner Mistakes

Mistake 1

Wrong Function Name

Wrong:


<button onclick="show()">

function showMessage()

Names do not match.

Mistake 2

Missing Parentheses

Wrong:

onclick="showMessage"

Correct:

onclick="showMessage()"

Mistake 3

Wrong Element ID

Wrong:

document.getElementById("head")

HTML:

<h1 id="heading">

IDs must match.

🌟 Best Practices

✅ Use meaningful function names.

✅ Keep event functions small.

✅ Test events carefully.

✅ Use comments for complex code.

✅ Avoid unnecessary alerts.

🏆 Mini Project – Welcome Button

Create:

Heading

Welcome Student

Button

Click Me

When button is clicked:

Learning JavaScript Events

should replace the heading.

📝 Practical Activity

Create:

Color Changer

Buttons:

Red

Green

Blue

When clicked:

Change webpage background color accordingly.

📋 Assignment

Assignment 6.7

What is an Event?
What is the purpose of Events?
Explain onclick Event.
Explain onmouseover Event.
Explain onkeydown Event.
Create a button click event program.
Create a background color changer using events.

🧠 Quiz

Q1. What is an Event?

A. Variable

B. User Action

C. Loop

D. Function

✅ Answer: B

Q2. Which event handles mouse clicks?

A. onhover

B. onclick

C. onmove

D. onenter

✅ Answer: B

Q3. Which event occurs when a key is pressed?

A. onkeyup

B. onkeydown

C. onclick

D. onload

✅ Answer: B

Q4. Which event occurs when a webpage loads?

A. onload

B. onclick

C. onsubmit

D. onkeyup

✅ Answer: A

Q5. Events make websites?

A. Static

B. Interactive

C. Invisible

D. Offline

✅ Answer: B

📌 Lesson Summary

✅ Events allow JavaScript to respond to user actions.

✅ onclick is used for button clicks.

✅ Mouse events detect mouse actions.

✅ Keyboard events detect key presses.

✅ Form events handle form submissions.

✅ Events are the foundation of interactive websites.