EVENTS IN JAVASCRIPT

This note explains events in simple language.

You will learn:

1. what an event is
2. what addEventListener() does
3. how an event handler works
4. why named functions are useful
5. what removeEventListener() does
6. what the event object is
7. what event.type and event.currentTarget mean

1. What is an event?

An event is a signal from the browser that something happened on the page.

Examples:

• the user clicked a button
• the user pressed a key
• the user typed in an input
• the window was resized
• an image finished loading

JavaScript uses events to react to user actions and run code at the right moment.

Diagram 1. Basic event idea

User does something
|
v
browser notices it
|
v
event happens
|
v
JavaScript can react

Explanation

The browser tells JavaScript:

Something happened - do you want to handle it?

2. What is an event listener?

An event listener is a mechanism that waits for a certain event.

For example:

• wait for a click
• wait for a key press
• wait for input text

When the event happens, JavaScript runs the event handler function.

Diagram 2. Event listener

Element
|
v
event listener is attached
|
v
listener waits
|
v
event happens
|
v
handler function runs

Explanation

The listener does not run all the time.

It only waits until the event happens.

3. The addEventListener() method

To add an event listener to an element, use:

element.addEventListener(event, handler, options)

Arguments

• event - event name as a string, for example "click"
• handler - function that should run when the event happens
• options - optional extra settings

Diagram 3. addEventListener() structure

element.addEventListener(event, handler, options)

element - where to listen
event   - what to wait for
handler - what to do
options - extra settings

4. First example: button click

HTML

<button class="my-button">Next</button>

JavaScript

const button = document.querySelector(".my-button");

button.addEventListener("click", () => {
  console.log("The button was pressed and now the next image will appear");
});

Explanation

This means:

1. find the button
2. listen for a "click" event
3. when the button is clicked, run the function

Diagram 4. Click event flow

button
|
v
listen for "click"
|
v
user clicks button
|
v
callback function runs
|
v
message appears in console

5. Event name

The first argument is the event name.

Example

"click"

This tells JavaScript exactly what to listen for.

Other examples of event names:

• "click"
• "input"
• "submit"
• "keydown"

Diagram 5. Event name idea

"click"
|
v
wait for mouse click

"keydown"
|
v
wait for keyboard press

Explanation

The event name tells the listener which browser signal matters.

6. Event handler

The second argument is the handler.

A handler is a function that runs when the event happens.

Example

() => {
  console.log("The button was pressed and now the next image will appear");
}

This function is called only after the click happens.

Diagram 6. Handler meaning

Event happens
|
v
handler function runs
|
v
JavaScript reaction happens

7. Anonymous handler function

In the first example, the handler is an anonymous arrow function.

Example

button.addEventListener("click", () => {
  console.log("The button was pressed and now the next image will appear");
});

This is good for short handlers.

8. Named handler function

You can also create the handler as a separate function and pass a reference to it.

Example

const button = document.querySelector(".my-button");

const handleClick = () => {
  console.log("The button was pressed and now the next image will appear");
};

button.addEventListener("click", handleClick);

Explanation

Here:

• handleClick is the handler function
• we pass the function itself, not the result of calling it

Diagram 7. Named handler

const handleClick = () => { ... }

button.addEventListener("click", handleClick)
|
v
when click happens
|
v
handleClick runs

9. Why named functions are useful

Named handler functions are useful because:

• code is easier to read
• the handler can be reused
• the handler can be removed later with removeEventListener()

Diagram 8. Anonymous vs named handler

Anonymous handler
-> good for short one-time code

Named handler
-> easier to read
-> easier to remove later
-> can be reused

10. One element can have many handlers

One element can have:

• many different event handlers
• even several handlers for the same event type

They will run in the order they were added.

Diagram 9. Many handlers on one element

button
|
+-- click handler 1
+-- click handler 2
`-- click handler 3

Click happens
|
v
handler 1 runs
|
v
handler 2 runs
|
v
handler 3 runs

Explanation

JavaScript does not stop after the first handler unless your code does something special.

11. The removeEventListener() method

To remove an event listener, use:

element.removeEventListener(event, handler, options)

It has the same arguments as addEventListener().

Diagram 10. removeEventListener() structure

element.removeEventListener(event, handler, options)

Same event
Same handler
Same options

Explanation

To remove the listener correctly, JavaScript must know exactly which listener to remove.

12. Important rule for removing listeners

To remove a listener, you must use the same handler function that was used in addEventListener().

That is why named functions are strongly recommended when you want to remove the listener later.

Example

const button = document.querySelector(".my-button");

const handleClick = () => {
  console.log("The button was pressed and now the next image will appear");
};

button.addEventListener("click", handleClick);

// later
button.removeEventListener("click", handleClick);

Diagram 11. Add and remove

addEventListener("click", handleClick)
|
v
listener is attached

removeEventListener("click", handleClick)
|
v
same handler is removed

Explanation

If the function is different, the listener will not be removed.

13. Why anonymous functions are hard to remove

If you use an anonymous function directly inside addEventListener(), you usually cannot remove it easily later, because you do not have a stored reference to that function.

Hard-to-remove example

button.addEventListener("click", () => {
  console.log("Click");
});

Better version

const handleClick = () => {
  console.log("Click");
};

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

Diagram 12. Why named handlers help

Anonymous function
|
v
no stored reference
|
v
hard to remove

Named function
|
v
stored reference exists
|
v
easy to remove

14. What is the event object?

When an event happens, JavaScript automatically creates an event object.

This object contains useful information about the event.

It is automatically passed as the first argument to the event handler.

Example

const handleClick = event => {
  console.log(event);
};

button.addEventListener("click", handleClick);

Diagram 13. Event object flow

User action
|
v
event happens
|
v
browser creates event object
|
v
handler receives it as first argument

Explanation

This object gives extra details about what exactly happened.

15. Event object parameter name

You can name the event object parameter anything you want.

Common names are:

• event
• e
• evt

Example

button.addEventListener("click", e => {
  console.log(e);
});

Explanation

The name is flexible, but the meaning stays the same.

16. Useful event object properties

Two important properties are:

• event.type
• event.currentTarget

17. event.type

event.type tells you the event type.

Example

const handleClick = event => {
  console.log(event.type);
};

button.addEventListener("click", handleClick);

Possible output

click

Diagram 14. event.type

click happens
|
v
event.type
|
v
"click"

Explanation

This is useful when you want to know what kind of event triggered the handler.

18. event.currentTarget

event.currentTarget is the element on which the event handler is currently running.

Example

const handleClick = event => {
  console.log(event.currentTarget);
};

button.addEventListener("click", handleClick);

Explanation

If the listener is attached to a button, then event.currentTarget will be that button.

Diagram 15. event.currentTarget

button.addEventListener("click", handleClick)
|
v
click happens on button
|
v
event.currentTarget = button

19. Full example with event object

const button = document.querySelector(".my-button");

const handleClick = event => {
  console.log("Event object:", event);
  console.log("Event type:", event.type);
  console.log("Current target:", event.currentTarget);
};

button.addEventListener("click", handleClick);

Diagram 16. Full event handling flow

1. Find button
2. Add click listener
3. User clicks
4. Browser creates event object
5. Handler gets event object
6. Handler can read event.type
7. Handler can read event.currentTarget

20. Event object helps us know more

Without the event object, we would only know that something happened.

With the event object, we can know:

• what type of event happened
• which element is handling it
• other useful details depending on event type

Diagram 17. Why event object is useful

Without event object
|
v
only know event happened

With event object
|
v
know details about the event

21. Common beginner mistakes

Mistake 1. Calling the handler instead of passing it

Wrong:

button.addEventListener("click", handleClick());

Correct:

button.addEventListener("click", handleClick);

Why?

Because addEventListener() needs a function reference, not the result of calling the function.

Mistake 2. Using a different function in removeEventListener()

Wrong idea:

button.removeEventListener("click", () => {
  console.log("Click");
});

This will not remove the original listener if the original handler was another function.

Mistake 3. Forgetting the event object is automatic

You do not create the event object yourself in normal event handling.

The browser creates it and passes it to the handler automatically.

Diagram 18. Common mistakes summary

1. Pass function reference, do not call it
2. Remove listener with the same handler
3. Event object is passed automatically

22. Easy memory rules

addEventListener() = start listening
removeEventListener() = stop listening
handler = function that reacts
event object = details about the event
event.type = event name
event.currentTarget = element with the listener

23. Quick summary

• An event is a browser signal that something happened on the page.
• addEventListener() attaches an event listener to an element.
• The handler is the function that runs when the event happens.
• Named functions are useful because they are easier to read and remove later.
• removeEventListener() removes a listener, but it needs the same handler function.
• The browser automatically passes an event object to the handler.
• event.type shows the event type.
• event.currentTarget shows the element where the handler is running.

24. Final conclusion

If you understand these ideas:

event
listener
handler
addEventListener()
removeEventListener()
event object
event.type
event.currentTarget

then you already have a strong base for working with events in JavaScript.

Events are one of the most important parts of web development because they connect user actions with JavaScript reactions.

25. Examples

Each example below highlights one main event-handling idea.

Example 1. Single and multiple callbacks

<div class="ex1-events-example">
  <div>
    <button id="ex1-single" class="ex1-btn">SINGLE CALLBACK</button>
    <hr>
    <button id="ex1-multiple" class="ex1-btn">MULTIPLE CALLBACKS</button>

    <style>
      .ex1-events-example {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 1rem;
        text-align: center;
      }
    </style>

    <script>
      (function () {
        const wrapper = document.currentScript.closest(".ex1-events-example");
        const singleBtn = wrapper.querySelector("#ex1-single");
        const multiBtn = wrapper.querySelector("#ex1-multiple");

        const handleClick = function () {
          console.log("click event listener callback");
        };

        singleBtn.addEventListener("click", handleClick);

        const firstCallback = function () {
          console.log("First callback!");
        };

        const secondCallback = function () {
          console.log("Second callback!");
        };

        const thirdCallback = function () {
          console.log("Third callback!");
        };

        multiBtn.addEventListener("click", firstCallback);
        multiBtn.addEventListener("click", secondCallback);
        multiBtn.addEventListener("click", thirdCallback);
      })();
    </script>
  </div>
</div>

Example 2. Add and remove a listener

<div class="ex2-events-example">
  <div>
    <button class="ex2-btn js-add">Add Listener</button>
    <button class="ex2-btn js-remove">Remove Listener</button>
    <hr>
    <button class="ex2-btn target-btn">Click me</button>

    <style>
      .ex2-events-example {
        padding: 16px;
        text-align: center;
      }
    </style>

    <script>
      (function () {
        const wrapper = document.currentScript.closest(".ex2-events-example");
        const addListenerBtn = wrapper.querySelector(".js-add");
        const removeListenerBtn = wrapper.querySelector(".js-remove");
        const btn = wrapper.querySelector(".target-btn");

        const handleClick = function () {
          console.log("click event listener callback");
        };

        addListenerBtn.addEventListener("click", function () {
          btn.addEventListener("click", handleClick);
          console.log("click event listener was added to btn");
        });

        removeListenerBtn.addEventListener("click", function () {
          btn.removeEventListener("click", handleClick);
          console.log("click event listener was removed from btn");
        });
      })();
    </script>
  </div>
</div>

Example 3. Event object details

<div class="ex3-events-example">
  <div>
    <button type="button" class="ex3-btn">Click me</button>

    <style>
      .ex3-events-example {
        padding: 16px;
        text-align: center;
      }
    </style>

    <script>
      (function () {
        const wrapper = document.currentScript.closest(".ex3-events-example");
        const button = wrapper.querySelector(".ex3-btn");

        const handleClick = function (event) {
          console.log("event: ", event);
          console.log("event type: ", event.type);
          console.log("currentTarget: ", event.currentTarget);
        };

        button.addEventListener("click", handleClick);
      })();
    </script>
  </div>
</div>