Behavior of events, and the $event variable in Vue.js

Question

With the following method "updateCoords", it is necessary to provide the 'event' argument. The following div tracks the mousemove event and updates the cursors x and y coordinates in real time via methods.

<div id="content">
  <div @mousemove="updateCoords($event)" style="height:400px;width:400px;border:2px solid black;">
    {{x}} {{y}}
  </div>
</div>

<script>
  new Vue({
    el: '#content',
    data: {
      x: 0,
      y: 0
    },
    methods: {
      updateCoords: function(event){
      this.x = event.clientX;
      this.y = event.clientY;
     }
    }
  })
</script>

This function does not work if event is not passed. It makes sense to me that we would pass something here since X and Y coordinates are dependent on the last location of the event. But how is this data stored? Do events track and store data within themselves?

Also it seems to make no difference if I pass my method the special $event variable or not. Calling...

  @mousemove="updateCoords($event)"
//is the same as 
  @mousemove="updateCoords()"

Does view automatically know that an incoming event argument is $event? Or is $event important to use in some other particular case??

tony19 · Accepted Answer · 2022-07-15 20:50:22Z

6

By default, handlers receive the $event as their argument. You can use methods in inline handlers, in which case, if you want $event to be one of the arguments, you need to include it.

edited Jul 15, 2022 at 20:50

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jul 18, 2017 at 22:10

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Behavior of events, and the $event variable in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related