Understanding DOM Events in JavaScript

When you’re building websites, you often want things to happen when users interact with your page. This is where DOM events come in handy. Let’s explore what events are and how to use them in JavaScript.

What are Events?

Events are things that happen in your web page. For example, when a user clicks a button or moves their mouse, that’s an event. JavaScript can “listen” for these events and do something when they happen.

Setting Up Our HTML

Let’s start with a simple HTML file with some buttons:

<!doctype html>
<html lang="en">
  <head>
    <title>DOM EVENTS</title>
    <script src="./events.js" defer></script>
  </head>
  <body>
    <button id="btn1">Click Me 1!</button>
    <button id="btn2">Click Me 2!</button>
    <button id="btn3">Click Me 3!</button>
    <button id="btn4">Click Me 4!</button>
  </body>
</html>

Handling Events

The best way to handle events is using the addEventListener method. Here’s how you can use it:

const btn1 = document.querySelector("#btn1");
const btn2 = document.querySelector("#btn2");
const btn3 = document.querySelector("#btn3");
const btn4 = document.querySelector("#btn4");

// Using function declaration
function display() {
  console.log("It was clicked!");
}
btn1.addEventListener("click", display);

// Using function expression
const displayE = () => {
  console.log("It was clicked!");
};
btn2.addEventListener("click", displayE);

// Using anonymous function
btn3.addEventListener("click", function () {
  console.log("It was clicked!");
});

// Using arrow function
btn4.addEventListener("click", () => {
  console.log("It was clicked!");
});

In this code, we’re adding a “click” event listener to each button. When a button is clicked, it will log “It was clicked!” to the console.

The Event Object

When an event happens, JavaScript creates an event object. This object contains useful information about the event. Let’s look at how to use it:

<!doctype html>
<html lang="en">
  <head>
    <title>DOM EVENT OBJECT</title>
    <script src="./event-object.js" defer></script>
  </head>
  <body>
    <ul>
      <li><button id="btn1">Click Me 1!</button></li>
      <li>
        <a id="btn2" href="https://www.google.com/" target="_blank"
          >GOOGLE BTN</a
        >
      </li>
    </ul>
  </body>
</html>

Now, let’s look at the JavaScript:

const btn1 = document.querySelector("#btn1");
btn1.addEventListener("click", (e) => {
  console.log(e);
});

// This will log a PointerEvent object when the button is clicked

const btn2 = document.querySelector("#btn2");
btn2.addEventListener(
  "click",
  (e) => {
    e.preventDefault();
    console.log("Default behavior prevented!");
  },
  false // we don't use capture phase, we will cover this later in the next post
);

In this code:

We log the entire event object when btn1 is clicked.
We prevent the default behavior of the link (btn2) when it’s clicked. This means the link won’t take you to Google when clicked.

Important Event Object Properties

The event object has many useful properties:

type: The type of event (e.g., “click”, “mouseover”)
target: The element that triggered the event
clientX and clientY: The mouse position when the event occurred
keyCode: The key pressed (for keyboard events)

Conclusion

Understanding DOM events is crucial for creating interactive web pages. With event listeners, you can make your website respond to user actions, creating a more engaging user experience.

Remember these key points:

Use addEventListener to handle events
The event object provides useful information about the event
You can prevent default behaviors with preventDefault()

Practice working with different types of events to become more comfortable with event handling in JavaScript!

In the next post, we’ll explore event propagation and bubbling, which are essential concepts for understanding how events work in the DOM.

Happy coding!