Events in JavaScript (JS)

The change in the state of an object is known as an Event. Events are fired to notify
code of "interesting changes" that may affect code execution.
An event is something that happens to an object, like when you click a button or press
a key. It notifies the code that something has changed and allows the code to respond
to it.
An event is something that happens on a website, like a click or a key press. The
website can then do something in response.
1. Mouse Events
o click: When you click on an element.
o dblclick: When you double-click.
o mouseover: When the mouse moves over an element.
o mouseout: When the mouse leaves an element.
2. Keyboard Events
o keypress: When you press a key.
o keydown: When you press down a key.
o keyup: When you release a key.
3. Form Events
o submit: When you submit a form.
o change: When you change the value in a form element.
o focus: When an element gets focus.
o blur: When an element loses focus.
4. Window Events
o load: When the page is fully loaded.
o resize: When the window is resized.
o scroll: When the page is scrolled.
5. Touch Events (for mobile devices)
o touchstart: When a touch point is placed on the touch surface.
o touchmove: When a touch point moves across the touch surface.
o touchend: When a touch point is removed from the touch surface.
6. Other Events:
o print: Happens when the print dialog is opened.
Events are important because they help us make websites interactive.
What is Event Handling?
When we click a button, an event happens. In response to that event, we can make the
website do something, like showing a message. This is called event handling. So,
event handling means reacting to an event by performing a specific action.
What Are Event Handlers?
Event handlers are functions that tell the website what to do when something
happens, like clicking a button. For example, when you click a button, an event handler
can make a message appear on the screen.
Example
 If you click a button, the event handler can show a message like "You clicked the
button!"
So, event handlers are not just about printing a message; they can do many things in
response to events, like changing pictures, hiding elements, or moving to a new page.
Properties and Methods of the Event Object
The Event Object has several properties and methods that give you information about
the event. Here are some common ones:
Properties:
 event.target: The element that triggered the event (like the button that was
clicked).
 event.type: The type of event (like "click" or "keydown").
 event.clientX: The X position of the mouse when the event happened.
 event.clientY: The Y position of the mouse when the event happened.
 event.currentTarget: The element to which the event handler is attached.
Methods:
 event.preventDefault(): Stops the default action that belongs to the event (like
preventing a form from submitting).
 event.stopPropagation(): Prevents the event from bubbling up to parent
elements.
Summary:
Event handlers are functions that run when events happen, and the Event Object
provides details about those events to help you decide what to do next!
What is an Event Object?
The Event Object is a special object that contains information about an event. All event
handlers can use the properties and methods of the Event Object.
An event object is a special JavaScript object that contains information about an event
that has occurred. When an event happens, like a click or a key press, the event object
is created and passed to the event handler (the function that responds to the event).
Key Points About the Event Object:
1. Information: The event object provides details about the event, such as:
o What type of event it is (like click, keypress).
o Which element triggered the event (the button or input field).
o The position of the mouse when the event happened.
2. Accessing Properties: You can access properties of the event object to get
more information. For example:
o event.target: The element that triggered the event.
o event.type: The type of the event (like "click" or "keydown").
o event.clientX and event.clientY: The mouse position when the event
occurred.
3. Use in Event Handling: The event object is useful in event handling because it
allows you to know exactly what happened and react accordingly.
In summary, the event object gives you important details about an event, helping you
make your website more interactive and responsive to user actions!
Event Object
The Event Object is a special tool in JavaScript that gives you information about an
event that happens on a website.
 What It Does: When something happens, like clicking a button, the Event Object
tells you what happened.
Here’s How You Can Use It:
 e.target: Shows which element you clicked.
 e.type: Tells you what type of event it is (like "click").
 e.clientX: Tells you the X position of your mouse when you clicked.
 e.clientY: Tells you the Y position of your mouse when you clicked.
In Simple Terms:
The Event Object helps you know what happens when an event occurs, so you can
decide what to do next!
What can we decide to do after an event happens on a website?
When something happens on a website, the Event Object helps us know what
happened. Then, we can decide what to do next. Here are some easy examples:
  Show a Message: You can tell the user, "You clicked the button!"
 Change Something: You can change the color of a button or hide an image.
 Do Math: If someone types in a number, you can add it to another number.
 Go to a New Page: You can take the user to a different page on the website.
 Collect Information: If they fill out a form, you can save what they wrote.
In Simple Terms:
The Event Object helps us see what happened, so you can choose how to respond!
Types of Event Handling in JavaScript
 Inline Event Handling
o Best Use: For simple actions, like showing a message when a button is
clicked.
 Event Listeners
o Best Use: For more complex actions, like changing images or text when
different buttons are clicked.
 Event Handling in JavaScript
o Best Use: To manage how the webpage reacts to user actions, like clicking
or typing.
Types of Event Handler best Uses and Drawbacks
1. Inline Event Handlers (Inside HTML)
 What’s good?
o Easy to understand and use for small tasks.
o You can see the event and action in the same place, which can be helpful
for very simple pages.
 What’s bad?
o It mixes HTML and JavaScript, making things messy.
o If you want to change the code later, it can be hard to find and fix.
o You can only have one action for an event. If you add another, it will replace
the first one.
Example:
<button onclick="alert('Button clicked!')">Click Me</button>

2. Traditional (JS DOM) Event Handlers

 What’s good?
o Simple to use if you only need one action for an event.
 o Keeps JavaScript out of the HTML, making the HTML cleaner.
 What’s bad?
o You can only have one action for an event. If you add another, it will replace
the first one.
o It sticks the JavaScript code to a specific element, making it harder to
manage.
Example:
const button = document.getElementById('myButton');
button.onclick = function() {
alert('Button clicked!');
};
Example:
button.onclick = function() {
alert('First action!');
};
button.onclick = function() {
alert('Second action!');
};
In this case, only the second action will run when you click, because it replaced
the first one.

3. addEventListener Method
 What’s good?
o You can add multiple actions to the same event (e.g., more than one thing
happens when you click).
o More flexible and better for larger programs.
o Keeps HTML and JavaScript separate, making the code easier to manage.
 What’s bad?
o You have to manually remove the event listener when you don’t need it
anymore. If not, your program might slow down or use too much memory.
Example:
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
 });

4. removeEventListener Method
 What’s good?
o Allows you to stop an event when you no longer need it, helping save
memory and keeping your program running smoothly.
 What’s bad?
o To remove an event, you need to remember the exact function you used,
which can be hard if you used an unnamed (anonymous) function.
Example:
function handleClick() {
alert('Button clicked!');
}
button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);

Quick Summary:
 Inline handlers: Easy but messy. Good for very small tasks.
 Traditional JS handlers: Simple, but can only do one action per event.
 addEventListener: Flexible and clean, but you need to manage unused events.
 removeEventListener: Good for stopping events, but needs careful use of
functions.
Each method has its benefits and challenges. Choose the one that fits the size and
complexity of your program.

What Are Event Listeners?

Event listeners are like "watchers" in a program. They wait for something to happen,
like a person clicking a button or moving the mouse. When that action happens, the
event listener does something, like showing a message.
Example:
Imagine you have a button on a website. You can use an event listener to say, "When
this button is clicked, show a pop-up."
Quick Code Example:
// Find the button
 const button = document.getElementById('myButton');

// When the button is clicked, show a message

button.addEventListener('click', function() {
alert('You clicked the button!');
});
Summary:
 Event Listener: Watches for actions (like clicks).
 What It Does: Executes a function when the action happens.
It's a way to make websites interactive!

This Example code will toggle between "light" and "dark" modes when the
button with the ID mode is clicked.

let modeBtn = document.querySelector("#mode");

let currMode = "light";

modeBtn.addEventListener("click", function() { // Event listener for button

click
if (currMode === "light") {
currMode = "dark";
document.querrySelector(“body”).style.backgroundColor = “black”;
} else {
currMode = "light";
document.querrySelector(“body”).style.backgroundColor = “white”;
}
console.log(currMode); // Log the current
mode
});