How to use the event object $event in Vue.js?

The event object is automatically passed to the method which handles the event. Let’s look at an example to see it in action.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Vue.Js</title>
  </head>

  <body>
    <div id="app">
      <div>Click to change button changeColor</div>
      <button @click="changeColor">Click Here!</button>
    </div>
  </body>

  <script>
    const { createApp } = Vue;

    createApp({
      methods: {
        changeColor(e) {
          console.log(e); // PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, …}
        },
      },
    }).mount("#app");
  </script>
</html>

In this example, we have button which triggers method changeColor on click event.

<button @click="changeColor">Click Here!</button>

The method changeColor is defined as follows:

changeColor(e) {
  console.log(e); // PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, …}
}

Notice, we have parameter e defined in the changeColor() method, even though it is not passed from the HTML code. The e parameter is the event object that gets passed automatically to the method handling click event.

Using the the event object, let try changing the color of the button once it gets clicked.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Vue.Js</title>
  </head>

  <body>
    <div id="app">
      <div>Click to change button changeColor</div>
      <button @click="changeColor">Click Here!</button>
    </div>
  </body>

  <script>
    const { createApp } = Vue;

    createApp({
      methods: {
        changeColor(e) {
          e.target.style.backgroundColor = "yellow";
        },
      },
    }).mount("#app");
  </script>
</html>

event-object-vue-1

In the method we will change the color when the button is clicked by changing the background color of button to yellow.

e.target.style.backgroundColor = "yellow";

event-object-vue-1

As you can see, once the button is clicked, the background color of the button changes to yellow.

Using $event

You can also explicitly specify the event object in Vue using the $event object which can be passed as argument to the method handling the event.

The above code can be rewritten using the $event object.

<button @click="changeColor($event)">Click Here!</button>

Her, we are passing the $event as the argument to the method changeColor(). Every other code remains the same.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Vue.Js</title>
  </head>

  <body>
    <div id="app">
      <div>Click to change button changeColor</div>
      <button @click="changeColor($event)">Click Here!</button>
    </div>
  </body>

  <script>
    const { createApp } = Vue;

    createApp({
      methods: {
        changeColor(e) {
          e.target.style.backgroundColor = "yellow";
        },
      },
    }).mount("#app");
  </script>
</html>

Explicitly specifying the $event object is useful when you have more than one arguments to pass to the method. For example, let’s say we want to also pass the color of the button along with event object.

<button @click="changeColor($event, 'pink')">Click Here!</button>

The entire code should now look like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Vue.Js</title>
  </head>

  <body>
    <div id="app">
      <div>Click to change button changeColor</div>
      <button @click="changeColor($event, 'pink')">Click Here!</button>
    </div>
  </body>

  <script>
    const { createApp } = Vue;

    createApp({
      methods: {
        changeColor(e, color) {
          e.target.style.backgroundColor = color;
        },
      },
    }).mount("#app");
  </script>
</html>

event-object-vue-1

The method now takes two parameters and the color is set as per the second argument.

changeColor(e, color) {
	e.target.style.backgroundColor = color;
}

Let look at another example,

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Vue.Js</title>
  </head>

  <body>
    <div id="app">
      <input type="text" @keydown="pressedKey" />
      <p>Key pressed: {{key}}</p>
    </div>
  </body>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          key: "",
        };
      },

      methods: {
        pressedKey(e) {
          this.key = e.key;
        },
      },
    }).mount("#app");
  </script>
</html>

In this example, we use a input tag to get the user input and on every keydown event we display it’s value using the key property.

<input type="text" @keydown="pressedKey" />
<p>Key pressed: {{key}}</p>

The pressedKey method will assign the key property to e.key which stores the latest key pressed.

pressedKey(e) {
	this.key = e.key;
}

event-object-vue-1

Using $event#

Using $event