Skip to main content

Python type() Function

When learning Python, you will work with different types of data, such as numbers, text, decimal values, and Boolean values. Python provides several built-in functions to help you work with these data types. One of the most useful functions is the type() function . The type() function tells you the data type of a value or variable. It helps you understand what kind of data Python is working with and can make debugging your programs easier. For example, consider these variables: age = 20 price = 99.50 name = "Rahul" is_student = True Although all four variables store data, their data types are different. Python allows us to check these types using type() . Let's understand how it works with simple examples. 1. What Is the type() Function in Python? The type() function is a built-in Python function that returns information about the type of an object. In beginner-level programming, you can use it to check whether a value is an integer, a floating-point number, a string,...
Post a Comment

JavaScript Events – Responding to User Actions

In the previous article, we learned about the DOM (Document Object Model), which allows JavaScript to access and modify HTML elements. However, modern websites do much more than simply display content—they respond to user actions.

For example:

  • Clicking a button

  • Typing in a text box

  • Moving the mouse

  • Submitting a form

  • Pressing a keyboard key

These actions are known as Events.

JavaScript uses events to create interactive and responsive web applications.

In this article, we will learn:

  • What events are

  • Event handling

  • Common JavaScript events

  • Event listeners

  • Mouse events

  • Keyboard events

  • Form events

  • Event bubbling

  • Event propagation

  • Practical examples

What is an Event?

An event is an action or occurrence that happens in a webpage.

Examples:

User clicks a button

User presses a key

User moves the mouse

User submits a form

JavaScript can detect these actions and respond accordingly.

Real-Life Example

Think of a doorbell.

Button Press
      ↓
Doorbell Rings

Similarly:

Button Click
      ↓
JavaScript Executes

Event Handling

The process of responding to an event is called Event Handling.

Example:

<button onclick="showMessage()">

Click Me

</button>

function showMessage()
{
    alert("Button Clicked");
}

When the button is clicked:

Event Occurs
      ↓
Function Executes

Types of Events

JavaScript supports many events.

Event TypeExample
Mouse EventsClick, Hover
Keyboard EventsKey Press
Form EventsSubmit
Window EventsLoad, Resize
Focus EventsFocus, Blur

Inline Event Handling

Events can be written directly inside HTML.

Example:

<button onclick="alert('Hello')">

Click Me

</button>

Output:

Popup appears

Why Inline Events Are Not Preferred

For small examples:

onclick=""

is acceptable.

For large projects:

  • Hard to maintain

  • Mixes HTML and JavaScript

Modern development prefers Event Listeners.

Event Listener

An Event Listener waits for an event and executes a function.

Syntax:

element.addEventListener(
event,
function
);

Example

HTML:

<button id="btn">

Click Me

</button>

JavaScript:

document
.getElementById("btn")
.addEventListener(
"click",
function()
{
    alert(
    "Button Clicked"
    );
}
);

Advantages of Event Listeners

  • Cleaner code

  • Better organization

  • Multiple events can be attached

  • Professional approach

Click Event

The most common event.

Example

HTML:

<button id="btn">

Click

</button>

JavaScript:

document
.getElementById("btn")
.addEventListener(
"click",
function()
{
    document.write(
    "Button Pressed"
    );
}
);

Output

After clicking:

Button Pressed

Double Click Event

Event:

dblclick

Example:

element.addEventListener(
"dblclick",
function()
{
    alert(
    "Double Clicked"
    );
}
);

Mouse Events

JavaScript can detect mouse movements.

Common Mouse Events

EventDescription
clickMouse click
dblclickDouble click
mouseoverMouse enters
mouseoutMouse leaves
mousemoveMouse moves

Mouse Over Example

HTML:

<h1 id="title">

Move Mouse Here

</h1>

JavaScript:

document
.getElementById("title")
.addEventListener(
"mouseover",
function()
{
    this.style.color =
    "red";
}
);

Output

When mouse enters:

Text becomes red

Mouse Out Example

document
.getElementById("title")
.addEventListener(
"mouseout",
function()
{
    this.style.color =
    "black";
}
);

Text returns to black.

Keyboard Events

Keyboard events occur when keys are pressed.

Common Keyboard Events

EventDescription
keydownKey pressed
keyupKey released
keypressKey typed

Example

HTML:

<input
type="text"
id="name">

JavaScript:

document
.getElementById("name")
.addEventListener(
"keydown",
function()
{
    console.log(
    "Key Pressed"
    );
}
);

Output

Every key press produces:

Key Pressed

in browser console.

Display Typed Text

HTML:

<input
type="text"
id="name">

JavaScript:

document
.getElementById("name")
.addEventListener(
"keyup",
function()
{
    console.log(
    this.value
    );
}
);

Example

Typing:

Rahul

Console displays:

R

Ra

Rah

Rahu

Rahul

Form Events

Forms generate events during interaction.

Common Form Events

EventDescription
submitForm submitted
focusInput selected
blurInput loses focus
changeValue changes

Submit Event

HTML:

<form id="myForm">

<input type="text">

<button>

Submit

</button>

</form>

JavaScript:

document
.getElementById("myForm")
.addEventListener(
"submit",
function()
{
    alert(
    "Form Submitted"
    );
}
);

Focus Event

Triggered when an input field is selected.

Example:

document
.getElementById("name")
.addEventListener(
"focus",
function()
{
    this.style.backgroundColor =
    "yellow";
}
);

Output

Input box becomes yellow.

Blur Event

Triggered when input loses focus.

Example:

document
.getElementById("name")
.addEventListener(
"blur",
function()
{
    this.style.backgroundColor =
    "white";
}
);

Window Events

Window-related events.

Common Window Events

EventDescription
loadPage loaded
resizeWindow resized
scrollPage scrolled

Load Event

window.addEventListener(
"load",
function()
{
    alert(
    "Page Loaded"
    );
}
);

Runs when webpage loads.

Resize Event

window.addEventListener(
"resize",
function()
{
    console.log(
    "Window Resized"
    );
}
);

Event Object

JavaScript automatically creates an event object.

Example:

element.addEventListener(
"click",
function(event)
{
    console.log(event);
}
);

Contains information about the event.

Example

document
.addEventListener(
"click",
function(event)
{
    console.log(
    event.target
    );
}
);

Displays clicked element.

Event Bubbling

Events move upward through the DOM hierarchy.

Example Structure:

Button

inside Div

inside Body

When button clicked:

Button
   ↓
Div
   ↓
Body

This process is called bubbling.

Example

HTML:

<div id="parent">

<button id="child">

Click

</button>

</div>

JavaScript:

document
.getElementById("parent")
.addEventListener(
"click",
function()
{
    console.log("Parent");
}
);

document
.getElementById("child")
.addEventListener(
"click",
function()
{
    console.log("Child");
}
);

Output:

Child

Parent

stopPropagation()

Stops bubbling.

Example:

event.stopPropagation();

Example

document
.getElementById("child")
.addEventListener(
"click",
function(event)
{
    event.stopPropagation();

    console.log(
    "Child"
    );
}
);

Output:

Child

Only child executes.

Practical Project – Change Background Color

HTML:

<button id="btn">

Change Color

</button>

JavaScript:

document
.getElementById("btn")
.addEventListener(
"click",
function()
{
    document.body.style.backgroundColor =
    "lightblue";
}
);

Output

Clicking button changes page color.

Practical Project – Character Counter

HTML:

<textarea id="text">

</textarea>

<p id="count">

0

</p>

JavaScript:

document
.getElementById("text")
.addEventListener(
"keyup",
function()
{
    document
    .getElementById("count")
    .innerHTML =
    this.value.length;
}
);

Output

Typing:

Hello

Counter displays:

5

Complete Program

<!DOCTYPE html>

<html>

<body>

<button id="btn">

Click Me

</button>

<script>

document
.getElementById("btn")
.addEventListener(
"click",
function()
{
    alert(
    "Button Clicked"
    );
}
);

</script>

</body>

</html>

Real-Life Applications

Events are used in:

  • Login systems

  • Online shopping carts

  • Games

  • Social media platforms

  • Banking websites

  • Chat applications

Platforms like Facebook, YouTube, and Amazon use millions of event-driven interactions every second.

Common Mistakes Beginners Make

Forgetting Event Name

Wrong:

addEventListener(
function()
{
}
);

Correct:

addEventListener(
"click",
function()
{
}
);

Wrong Element ID

getElementById(
"button"
)

must match actual HTML ID.

Not Using stopPropagation()

Can cause unexpected bubbling.

Advantages of Events

  • Interactive webpages

  • Dynamic user interfaces

  • Better user experience

  • Real-time responses

  • Essential for modern web applications

Conclusion

Events are the foundation of interactive web development. They allow JavaScript to respond to user actions and create dynamic experiences.

Comments

Post a Comment

Popular posts from this blog

Understanding Comments in Java: A Beginner’s Guide

When learning Java programming, one of the first concepts you’ll come across is comments . Comments may not affect how a program runs, but they play a crucial role in making code more understandable, readable, and maintainable. Let’s dive deeper into what comments are, why they’re important, and the different types of comments in Java. What are Comments in Java? A comment in Java is a piece of text written within a program that is ignored by the compiler . In other words, comments are notes for humans, not instructions for machines. They help developers explain the purpose of code, describe logic, or temporarily disable certain lines of code without deleting them. Why are Comments Important? 📌 Readability – Comments make code easier to understand for you and others. 📌 Maintenance – When you revisit your code after months, comments remind you what you were doing. 📌 Collaboration – In team projects, comments explain code to fellow developers. 📌 Debugging – You c...
Post a Comment
Read more

Java Program to Check Voting Eligibility

In this program, we’ll take the user’s age as input and check whether the person is eligible to vote or not. In India, the minimum age required to vote is 18 years . 💻 Program Code // Java Program to Check Voting Eligibility import java.util.Scanner; public class VotingEligibility { public static void main(String[] args) { // Create Scanner object to take input from user Scanner sc = new Scanner(System.in); // Ask user to enter age System.out.print("Enter your age: "); int age = sc.nextInt(); // Check eligibility if (age >= 18) { System.out.println("You are eligible to vote."); } else { System.out.println("You are not eligible to vote yet."); System.out.println("You can vote after " + (18 - age) + " year(s)."); } sc.close(); // Close the scanner } } 🧠 Explanation import java.util.Scanner; → Imp...
Post a Comment
Read more

Java Program to Calculate Total Marks and Average of Five Subjects

💡 Program Explanation In this program: The user will input marks of five subjects . The program will calculate the total marks and average . It will then display both results clearly. 🧑‍💻 Java Code: // Java Program to Calculate Total Marks and Average of Five Subjects import java.util.Scanner; // Importing Scanner class for user input public class TotalAndAverage { public static void main(String[] args) { // Creating Scanner object to take input from user Scanner sc = new Scanner(System.in); // Declaring variables for five subjects double subject1, subject2, subject3, subject4, subject5; // Taking marks input for each subject System.out.print("Enter marks of Subject 1: "); subject1 = sc.nextDouble(); System.out.print("Enter marks of Subject 2: "); subject2 = sc.nextDouble(); System.out.print("Enter marks of Subject 3: "); subject3 = sc.nextDo...
Post a Comment
Read more