Get element where Event is binded

I am binding an event to an element either using @click property in Vue (it behaves the same as javascript .onclick property).

The problem I have is when the event is called by propagating from the child DOM nodes click events I get the child DOM element as target property and I cannot find a way a clean way (without searching for the parents, as the element might me nested deep inside) to access the DOM element that the event was registered onto inside the event callback.

<td @click="onCellClick($event)">
  <div class="text">
    <span>default</span>
  </div>
</td>

Answer

I think the confusion is with the event’s target vs currentTarget

event.target is what triggers the event dispatcher to trigger and event.currentTarget is what you assigned your listener to.

Vue.component('cell', {
  template: '#cell',
  methods: {
    onCellClick: function (e) {
      console.log(e.currentTarget)
    }
  }
});