Subject: CSS(22519) Academic Year: 2024-25
Course: CO (5I) Semester: Fifth
A STUDY ON :-
Using all Mouse Event in One html page
MICRO PROJECT REPORT
By
Roll Name of student Enrollment no. Seat No.
No.
46 Kedar Ranalkar 2209350166
Under the guidance of
Ms Ashwini Dhage
Third year of Diploma program in Engineering and Technology of
Maharashtra State board of Technical Education, Mumbai.
AT
SHIYAJIRAO S. JONDHLE POLYTECHNIC ASANGAON
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
This is Certify that Mr. KedarRanalkar, Roll no. 46 in fifth
semester of Computer Engineering Diploma program in Engineering
and Technology At 0935 SHIVAJIRAO S. JONDHLE
POLYTECHNIC has completed the Micro Project Satisfactorily in
subject Clint Side Scripting Language(22519) in the academic year
2024-25 as per the MSBTE Prescribed curriculum of ‘I’ Scheme .
Place : Asangaon Date : / / 2024
Enrollment no: 2209350166 seat no.
Subject Teacher Head of department Principle
Seal of institute
Index
Sr. no. Topic
1. Introduction to Event Handling
2. Why it is used
3. What it is used for
4. Advantages and
Disadvantages
5. Example
6. Conclusion
7. Reference
1. Introduction to Event Handling:
Event handling is the process of responding to actions or
occurrences (events) that happen during the runtime of
an application. Events can be generated by user
interactions, like mouse clicks, keyboard presses, or
touch gestures, as well as system-generated events, like a
timer or a file change.
1. Events:
An event is any action recognized by the application.
2. Event Sources:
The source of an event is the component or object where
the event originates.
3. Event Listeners:
Listeners (or handlers) are functions or methods set up
to respond when a specific event occurs.
4. Event Propagation:
Event propagation describes how events travel through
the application, especially in the case of nested
components.
5. Event Handling Flow:
1. Event generation.
2. Event detection.
3. Event response
2. Why it’s used:
1. User Interaction: Event handling allows applications
to respond to user actions, such as clicks, key
presses, and gestures, making interfaces more
engaging and intuitive.
2. Dynamic Behavior:Applications can update the UI
dynamically based on user interactions or changes in data
3. Modular Design:Event handling promotes a modular
approach to programming by separating the logic of what
happens when an event occurs from the event source
itself.
4. Asynchronous Programming:Event handling supports
asynchronous operations, allowing applications to remain
responsive while waiting for tasks like data .
5. Improved User Experience:Well-implemented event
handling leads to more intuitive user interfaces that
respond logically to user input, improving overall user
experience.
6. Game Development
In gaming, event handling is crucial for capturing player
inputs and triggering game actions, animations, or
transitions based on those inputs.
3. What it’s used for:
1. Web Development:Handle clicks, form submissions,
and keyboard input to make web applications interactive.
2. Mobile Applications: Capture touch events like taps,
swipes, and pinches to enable navigation and interactions
in mobile apps.
3. Game Development:Detect and respond to player
actions, such as keyboard presses or mouse movements,
to control characters or gameplay mechanics.
4. Desktop Applications: Handle events in graphical user
interfaces, such as opening a dialog box when a menu
item is selected or updating the display based on user
input.
5. Network Applications:Handle incoming messages from
a server in real-time applications, such as chat
applications or live data feeds.
6. IOT Devices:Respond to data from sensors to trigger
actions, such as turning on a fan or sending alerts.
4. Example :
OUTPUT:
BEFORE AFTER
5. Advantages and Disadvantages:
Advantages
1. Interactivity: Event handling allows programs to
respond to user actions like clicks, keypresses, or
gestures, making applications interactive and
responsive.
2. Modularity: By separating event-handling logic
from core application logic, code becomes more
modular and organized, which is easier to maintain
and extend.
3. Dynamic User Experience: Events make it possible
to update the UI in real-time, creating a dynamic
and engaging experience for users without needing
to refresh the page.
4. Asynchronous Processing: Events can be triggered
asynchronously, allowing applications to handle
multiple actions simultaneously, which can improve
performance and responsiveness.
Disadvantages
1. Complexity with Nested Events: Handling multiple,
nested events (e.g., in applications with complex UIs)
can lead to issues like callback hell or difficulty in
managing event order and dependencies.
2. Event Overhead: Excessive event listeners can
consume memory and CPU resources, especially in
large applications, which can impact performance.
3. Debugging Difficulty: Events can be difficult to debug
due to asynchronous behavior, especially with issues
like unexpected event firing or complex event chains.
4. Risk of Memory Leaks: Improper handling of events,
such as not removing listeners, can lead to memory
leaks, as objects referenced by event handlers may not
be garbage collected.
6. Conclusion:
In conclusion, event handling is a fundamental
concept in programming that allows applications
to respond to user interactions and system events
effectively. It plays a crucial role in creating
interactive, dynamic, and user-friendly interfaces
across various platforms, including web, mobile,
and desktop applications.
By understanding and implementing event
handling, developers can create applications that
are not only functional but also responsive to the
needs and actions of users, ultimately leading to a
better overall experience.
7. Reference:
1. MDN Web Docs (Mozilla Developer Network) –
Event reference on MDN
2. W3Schools – Provides a beginner-friendly approach
with examples on how to use various event
attributes and listener functions in HTML, CSS, and
JavaScript.
Event Handling on W3Schools
3. JavaScript.info – This site offers detailed
explanations on event handling in JavaScript,
including the Event Object, delegation, and
capturing/bubbling.
JavaScript Events
4. React Documentation (for React projects) – If
you’re working with React, this documentation
explains how to manage events within the React
framework.
React Events
